折叠菜单，选择下拉（手风琴）

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

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

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

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

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

具体参见：http://www.runoob.com/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>

运行结果展示：

点击后的样式展示：

转载于:https://www.cnblogs.com/wll-cs/p/6672227.html

折叠菜单，选择下拉（手风琴）相关推荐

三、bootstrap4 组件（警告和提示框、徽章和面包屑、按钮按钮组、卡片、列表组、导航和选项卡、分页和进度条、巨幕和旋转图标、轮播图、折叠菜单、下拉菜单、导航条、滚动监听、轻量弹框、模态框、表单）
1.1 警告提示框 1.2 徽章和面包屑 1.3 按钮和按钮组 1.4 卡片 1.5 列表组 1.6 导航和选项卡 1.7 分页和进度条 1.8 巨幕和旋转图标 1.9 轮播图 1.10 折叠菜单 1 ...
html5折叠卡片,基于HTML5折叠卡片式下拉菜单代码
基于HTML5折叠卡片式下拉菜单代码.这是一款基于jQuery+CSS3+HTML5实现的下拉列表框特效代码.效果图如下: 实现的代码. hmtl代码: 爱编程爱编程 jQuery特效 CSS3特效 ...
选下拉框的的值对应上传相应的图片_如何在excel中实现，选择下拉菜单某一项，该表格中就出现选项对应的数据？(excel表格制作选择数据)...
怎样从多个excel表格中提取数据,做数据分析图呢 1. 数据的.录入.表格的设置,效果如示. 2.如图所示,选进行分析的图据范围 3.如图所示,点击菜单栏目上的"插入",选择&q ...
选下拉框的的值对应上传相应的图片_excel表格下拉菜单调用对应数据,如何在excel中实现，选择下拉菜单某一项，该表格中就出现选项对应的数据？...
如何在excel中实现,选择下拉菜单某一项,该表格中就出现选项对应的数据? 选中这几列打开菜单"数据"-"筛选"-"自动筛选"就是了. 另 ...
QQ截屏抓级联菜单、下拉菜单及右键弹出菜单图
QQ方便的截屏功能大家都已经玩过了,又给聊天增添了不少乐趣.只要在浏览网页时发现什么值得共享的东东,单击捕捉屏幕按钮即可搞定.这对那些被QQ尾巴整怕了,看到链接就会浑身发抖的人来说,可以长舒一口气了. ...
纯CSS实现下拉菜单及下拉容器等（纯CSS实现导航条及导航下拉容器）
原文:纯CSS实现下拉菜单及下拉容器等(纯CSS实现导航条及导航下拉容器) 虽然网上类似甚至相同的案例有很多,但是我还是写下,以记下笔记,也可供大家参考希望大家可以指导批评~~ 首先我们以列表ul ...
html中按钮下拉菜单,CSS 下拉菜单
CSS 下拉菜单使用 CSS 创建一个鼠标移动上去后显示下拉菜单的效果. 下拉菜单实例实例演示 1 文本下拉菜单菜鸟教程 www.runoob.com 实例演示 2 实例演示 3 学的不仅是技术 ...
html按钮的下拉菜单,按钮下拉菜单
按钮下拉菜单仅从外观上看和上一节介绍的下拉菜单效果基本上是一样的.不同的是在普通的下拉菜单的基础上封装了按钮(.btn)样式效果.简单点说就是点击一个按钮,会显示隐藏的下拉菜单. 按钮下拉菜单其实就是 ...
html 下拉菜单不能下拉_音乐下拉菜单
html 下拉菜单不能下拉 Musical drop down menu 音乐下拉菜单 Our new tutorial tells about developing cool musical dro ...
html支付选择银行卡,JQ电脑手机通用银行选择下拉框提现银行卡绑定
兼容性: IE11 IE10 IE9 IE8 IE7 IE6 Firefox Chrome Safari 热度1949℃ 通用银行选择下拉框,可以自己添加下载1次所需铜板15个(1.5元)  ...

折叠菜单，选择下拉（手风琴）

折叠菜单，选择下拉（手风琴）相关推荐

最新文章

热门文章