[英]Drop down menu with on click toggle
I am attempting to create a drop down menu which activates on click rather than on hover. 我试图创建一个下拉菜单,该菜单在单击时(而不是悬停时)激活。 So far I have the on click working with a little javascript, but whilst the sub menus show well and if another menu is clicked other submenus hide, I can't work out how to hide a sub menu if its parent is clicked.
到目前为止,我可以使用一些Javascript进行单击,但是子菜单显示良好,并且如果单击了另一个菜单,则其他子菜单隐藏了,但是如果单击了父菜单,我将无法解决如何隐藏子菜单的问题。
EG in this JS fiddle I can click on "parent 1" to reveal its children and when I click on "parent 2" parent 1's children hide and Parent 2's children show. EG在此JS小提琴中,我可以单击“父级1”以显示其子级,当我单击“父级2”时,父级1的子级会隐藏,父级2的子级会显示。 But if Parent 1's children show I want to be able to hide them by clicking on Parent 1 again, (or even better anywhere outside the children)
但是,如果父母1的孩子显示我希望能够再次单击父母1来隐藏它们,(或者甚至可以在孩子之外的任何地方)
I have seen examples working where each parent and sub menu is given individual classes or ids. 我看到了一些示例,其中每个父级和子级菜单都被赋予了单独的类或ID。 I want to avoid that as it needs to work in a cms.
我想避免这种情况,因为它需要在cms中工作。
Here's the basic code I have 这是我的基本代码
The HTML: HTML:
<div>
<ul>
<li><a href="#">Parent 1</a>
<ul>
<li><a href="#">Parent 1 » Child 1</a></li>
<li><a href="#">Parent 1 » Child 1</a></li>
<li><a href="#">Parent 1 » Child 1</a></li>
</ul>
</li>
<li><a href="#">Parent 2</a>
<ul>
<li><a href="#">Parent 2 » Child 2</a></li>
<li><a href="#">Parent 2 » Child 2</a></li>
<li><a href="#">Parent 2 » Child 2</a></li>
</ul>
</li>
<li><a href="#">Parent 3</a>
<ul>
<li><a href="#">Parent 3 » Child 3</a></li>
<li><a href="#">Parent 3 » Child 3</a></li>
<li><a href="#">Parent 3 » Child 3</a></li>
</ul>
</li>
</ul>
The javascript: JavaScript:
$(document).ready(function () {
$("li").click(function () {
$('li > ul').hide();
$(this).children("ul").toggle();
});
});
CSS is probably not necessary, but its on the fiddle if needed CSS可能不是必需的,但是如果需要,它可以放在小提琴上
check this fiddle 检查这个小提琴
http://jsfiddle.net/Kritika/SZwTg/1/ http://jsfiddle.net/Kritika/SZwTg/1/
$(document).ready(function () {
$("li").click(function () {
$('li > ul').not($(this).children("ul")).hide();
$(this).children("ul").toggle();
});
});
or 要么
$(document).ready(function () {
$("li").click(function () {
var submenu=$(this).children("ul");
$('li > ul').not(submenu).hide();
submenu.toggle();
});
});
on click of "parent 1" it reveals its children and when you click on "parent 2" parent 1's children hide and Parent 2's children show. 单击“父级1”时,它会显示其子级;当您单击“父级2”时,父级1的子级会隐藏,父级2的子级会显示。 and if Parent 1's children show you wil be able to hide them by clicking on Parent 1 again.
如果“父母1”的孩子显示给您,您将可以再次单击“父母1”来隐藏他们。
Better to use slideToggle at the place of toggle: 最好在toggle的位置使用slideToggle:
$(document).ready(function () {
$("li").click(function () {
$('li > ul').not($(this).children("ul")).hide();
$(this).children("ul").slideToggle('slow');
});
}); });
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.