700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > 折叠菜单 选择下拉(手风琴)

折叠菜单 选择下拉(手风琴)

时间:2023-03-12 15:52:01

相关推荐

折叠菜单 选择下拉(手风琴)

无聊,就自己写了一个手风琴的下拉菜单,写之前要介绍以下几个JQuery函数的用法:

1.children()方法 ,表示当前元素下的子元素,函数内可以有参数,参数为“子元素”的名称。

2.slideToggle()方法,在JQuery中,表示向上/向下滑动样式切换。参数可以取“slow”、“fast”、毫秒

3.slideUp()方法, 用于向上滑动元素。参数可以取“slow”、“fast”、毫秒。

4.siblings()方法,用于返回被选元素的所有同胞元素。如果加参数,表示被选元素的所有“参数”的同胞元素。

具体参见:/jquery/jquery-traversing-siblings.html 下的JQuery 同胞详解。

好,我们知道了以上函数,我们开始编写代码:

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>折叠选项框</title><script type="application/javascript" src="js/jquery-1.9.1.js"></script><script type="application/javascript">$(function(){$("#list li p").css("color","royalblue");$(".main ul li ").click(function(){$(this).children("ul .menu").slideToggle();//siblings() 表示当前元素的所有同胞元素$(this).siblings().children("ul .menu").slideUp();});});</script><style type="text/css">.main{width: 300px;height: 520px;border: 1px red solid;}.menulist{list-style: none;}.menu{color: darkmagenta;font: "微软雅黑";display: none;}</style></head><body><div class="main"><ul id="list"><li class="menulist"><p>电视</p><ul class="menu" style="display:block"><li>长虹电视</li><li>sky电视</li><li>三星电视</li></ul></li><li class="menulist"><p>电脑</p><ul class="menu"><li>索尼电脑</li><li>戴尔电脑</li><li>华硕电脑</li></ul></li><li class="menulist"><p>ipdad</p><ul class="menu"><li>Apple IPad nimi</li><li>Apple IPad Air Pro</li><li>Apple IPad Air2</li></ul></li><li class="menulist"><p>手机</p><ul class="menu"><li>OPPO</li><li>VIVO</li><li>小米</li><li>华为</li></ul></li></ul></div></body></html>

运行结果展示:

点击后的样式展示:

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。