[英]How to make a dynamic accordion menu with jQuery
Lets say I have the following menu structure. 可以说我有以下菜单结构。 I have 3 problems with it. 我有3个问题。
$('.parent ul').hide(); var current_parent; $(document).delegate('.parent', 'click', (function() { var $this = $(this); if(current_parent !== undefined) { current_parent.find('ul').slideUp(); } current_parent = $this; // Check if the element is visble or not if(!$this.find('ul').is(':visible')) { $this.find('ul').slideDown(); } else { $this.find('ul').slideUp(); } }));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="menu"> <li class="parent">menu item1 <ul> <li class="child">Sub menu item1</li> <li class="child parent">Sub menu item2 <ul> <li class="child">Sub-sub menu item1</li> </ul> </li> </ul> </li> <li class="parent">menu item2 <ul> <li class="child">Sub menu item3</li> </ul> </li> </ul>
menu item 1
the Sub-sub menu item1
is also opened. 当您单击menu item 1
, Sub-sub menu item1
menu item 1
也将打开。 How can this be prefented?; 如何伪造呢? Sub menu item2
the menu item1
is also closed. 当您单击Sub menu item2
, menu item1
也将关闭。 How can this be prefented?. 如何伪造呢? $('ul ul ul').slideDown();
如何使它更具动态性,以便在添加更深的菜单项时菜单仍然可以工作,而不必添加以下内容: $('ul ul ul').slideDown();
etc.? 等等。? Could anyone help me with these problems? 有人可以帮我解决这些问题吗?
Thanks in advance 提前致谢
You can create a drop drop down menu with jquery 您可以使用jquery创建一个下拉菜单
I have given individual HTML, CSS and JQuery code, use it and try to understand it. 我已经给出了单独的HTML,CSS和JQuery代码,请使用它并尝试理解它。
There is an outer <div id="navigation"> and inside it their is an
now in it every
外面有一个<div id="navigation"> and inside it their is an
now in it every
is main menu item and
in every
is main menu item and
in every
is sub menu item. Furthermore you can create sub menu in sub menu also by creating
is sub menu item. Furthermore you can create sub menu in sub menu also by creating
in
is sub menu item. Furthermore you can create sub menu in sub menu also by creating
in
$(document).ready(function () { $("li").click(function () { var x = $(this).children("a:first").attr("href"); if (x != undefined) window.location.href = x; }); $("#nav li").hover(function () { $(this).find("ul:first").css({ visibility: "visible", display: "none", }).slideDown(400); }, function () { $(this).find("ul:first").css({ visibility: "hidden" }); }); });
body { font-family: Calibri, Verdana; font-size: 16px; color: white; } a { color: inherit; text-decoration: none; } #navigation { height: 40px; } #nav { list-style: none; margin: 0px; padding: 0px; } #nav ul { list-style: none; margin: 10px 0px 0px -5px; padding: 0px; display: none; } #nav li { float: left; width: 150px; height: 30px; padding: 10px 0px 0px 5px; border: 0px solid transparent; border-right-width: 1px; border-right-color: gray; background-color: #6397CB; } #nav li ul li { width: 145px; height: 22px; padding: 10px 0px 8px 10px; border: 0px solid transparent; border-top-width: 1px; border-top-color: gray; } #nav li ul li ul { position: relative; top: -40px; margin-left: 145px; color: white; } #nav li ul li ul li { border: 0px solid transparent; border-left-width: 1px; border-left-color: gray; border-top-width: 1px; border-top-color: gray; } #nav li:hover { background-color: lightgray; cursor: pointer; } #nav li ul li:hover { color: black; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="navigation"> <ul id="nav"> <li><a href="#">My Name</a></li> <li>About U <ul> <li>How U? <ul> <li><a href="#">Your Extras</a></li> </ul> </li> <li><a href="#">Howz U?</a></li> </ul> </li> <li><a href="#">More</a></li> </ul> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.