jQuery使用其父级在锚点上切换以找到子ul
[英]Jquery toggle on anchor using its parent to find child ul
问题描述
I'm trying to toggle segments in my menu using jquery. 
我正在尝试使用jquery切换菜单中的细分。 I can getting it working if i bind the toggle on the <li> element but then as soon as I click on any elements in the <li> the elements disappear, obviously because of the toggle. 如果在<li>元素上绑定切换，则可以使它工作，但是一旦单击<li>的任何元素，该元素就会消失，这显然是由于切换。 So I've tried adding the toggle event to the anchor with no success please see my code below. 因此，我尝试将切换事件添加到锚点没有成功，请参见下面的代码。 Jquery is at bottom. jQuery位于底部。 Thanks 谢谢
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<header><link href="mobmenu.css" rel="stylesheet" type="text/css"/>
</header>
<div id="wrapper">
<h1>Flyout Menu Demo - (Vertical Menu System) </h1>
<div id="main_navigation">
<ul class="menu_level1">
<li><a href="#">Home</a></li>
<li class="submenu1"><a class = "sb1" href="#">Products</a>
<ul class="menu_level2">
<li class="submenu2"><a class = "sb2" href="#">Category 1</a>
<ul class="menu_level3">
<li class="submenu"><a class = "sb3" href="#">Product 1</a>
<ul class="menu_level4">
<li><a href="#">Product 1 Sub 1</a></li>
<li><a href="#">Product 1 Sub 2</a></li>
<li><a href="#">Product 1 Sub 3</a></li>
</ul>
</li>
<li><a href="#">Product 2</a></li>
<li><a href="#">Product 3</a></li>
</ul>
</li>
<li class="submenu2"><a class = "sb2" href="#">Category 2</a>
<ul class="menu_level3">
<li><a href="#">Product 1</a></li>
<li><a href="#">Product 2</a></li>
</ul>
</li>
</ul>
</li>
<li class="submenu1"><a class= "sb1" href="#">Services</a>
<ul class="menu_level2">
<li><a href="#">Services 1</a></li>
<li><a href="#">Services 2</a></li>
</ul>
</li>
<li><a href="#">Projects</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('.sb1').bind('mousedown', openSubMenu1);
$('.sb2').bind('mousedown', openSubMenu2);
//$('.submenu2').bind('mousedown', openSubMenu);
function openSubMenu1() { $(this).parent.find('ul.menu_level2').toggle(); };
function openSubMenu2() { $(this).parent.find('ul.menu_level3').toggle(); };
});
</script>
</body>
</html>
3 个解决方案
解决方案1
1 2012-07-13 15:33:06
Try using the visible selector . 尝试使用可见的选择器 。 I haven't tested this but it should be a push in the right direction if it doesn't work. 我尚未对此进行测试，但是如果不起作用，则应该朝着正确的方向推进。
<script type="text/javascript">
$(document).ready(function() {
$('.sb1').mousedown(function() {
var tmp = $(this).parent.find('ul.menu_level2');
if ($(tmp).is(':visible')) {
tmp.hide();
} else {
tmp.show();
}
});
$('.sb2').mousedown(function() {
var tmp = $(this).parent.find('ul.menu_level3');
if ($(tmp).is(':visible')) {
tmp.hide();
} else {
tmp.show();
}
});
});
</script>
解决方案2
1 2012-07-13 15:38:15
I think you're going up only one level (which worked with li because it is one level higher, while the event on 'a' needs to go 2 levels up), you need to get 2 levels up in order to get the ul . 我认为您只上升了一个级别（与li一起使用是因为它上升了一个级别，而'a'上的事件需要上升2个级别），您需要上升2个级别才能获得ul 。 So use .parent() a second time, or use .parents() which goes up any number of levels. 因此，使用.parent（）第二次，或使用。家长（），该上升的任何数量的级别。
解决方案3
1 2012-07-13 15:56:47
If I understand this right the problem is when you click elements inside li, the li event is triggered? 如果我理解这一权利，那么问题是当您单击li中的元素时，会触发li事件吗？ If so, how about adding event.stopPropagation to the li children elements? 如果是这样，如何向li子元素添加event.stopPropagation？
Something like this 像这样
$('ul li').children().on('mousedown', function(event){
event.stopPropagation();
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.