折叠菜单，选择下拉（手风琴）
生活随笔
收集整理的這篇文章主要介紹了
折叠菜单，选择下拉（手风琴）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
無聊，就自己寫了一個手風琴的下拉菜單，寫之前要介紹以下幾個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
總結
以上是生活随笔為你收集整理的折叠菜单，选择下拉（手风琴）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： sqlserver如何读写操作windo
- 下一篇： yum阿里云镜像源