[英]jQuery dropdown menu links not working
I have a jQuery dropdown menu but now my links aren't working: 我有一个jQuery下拉菜单,但现在我的链接不起作用:
$(document).ready(function() { function visible($e) { if( $e.is(':visible') ) { return true; } else { return false; } } $('.nav .parent').find('ul').hide(); $(document).delegate('.parent', 'click', function() { var $this = $(this), $child = $this.children('ul'); if( visible( $child ) ) { $child.slideUp(); } else { $child.slideDown(); } return false; }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="nav"> <ul> <li class="parent">Media <ul> <li class="parent">Videos <ul> <li class="child"><a href="#">Overview</a></li> <li class="child"><a href="#">Add</a></li> </ul> </li> <li class="parent">Music <ul> <li class="parent">Albums <ul> <li class="child"><a href="#">Overview</a></li> <li class="child"><a href="#">Add</a></li> </ul> </li> </ul> </li> </ul> </li> </ul> </div>
I know the problem is return false;
我知道问题是
return false;
. 。 But if I would delete that line the sliding isn't working properly.
但是,如果我删除该行,则滑动将无法正常工作。 Because clicking on a sub menu item makes it close all the way to the main menu item.
因为单击子菜单项会使它一直关闭到主菜单项。 Which is what I don't want.
这是我不想要的。 So my question is, is there a simple way to make the links work while keeping
return false
? 所以我的问题是,有一种简单的方法可以使链接正常工作,同时保持
return false
吗?
I know that by adding something like the following: 我知道通过添加如下内容:
$(document).delegate('li.child a', 'click', function() {
var $this = $(this),
$url = $this.attr('href');
window.location = $url;
});
It will work but I would like to keep my js to a minimum. 它将起作用,但我想将我的js减至最少。
Thanks in advance 提前致谢
The event bubbling is what is preventing your links to use the return false;
事件冒泡是阻止您的链接使用
return false;
What you need is: event.stopImmediatePropagation()
: 您需要的是:
event.stopImmediatePropagation()
:
Just add this piece of code to make it working: 只需添加以下代码即可使其正常工作:
$(".child a").off("click").click(function (e) {
e.stopImmediatePropagation();
return true;
});
Snippet: 片段:
$(document).ready(function() { function visible($e) { if( $e.is(':visible') ) { return true; } else { return false; } } $('.nav .parent').find('ul').hide(); $(document).delegate('.parent', 'click', function() { var $this = $(this), $child = $this.children('ul'); if( visible( $child ) ) { $child.slideUp(); } else { $child.slideDown(); } return false; }); $(".child a").off("click").click(function (e) { e.stopImmediatePropagation(); return true; }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="nav"> <ul> <li class="parent">Media <ul> <li class="parent">Videos <ul> <li class="child"><a href="#">Overview</a></li> <li class="child"><a href="#">Add</a></li> </ul> </li> <li class="parent">Music <ul> <li class="parent">Albums <ul> <li class="child"><a href="#">Overview</a></li> <li class="child"><a href="#">Add</a></li> </ul> </li> </ul> </li> </ul> </li> </ul> </div>
Try adding this code, 尝试添加此代码,
$(".child > a").click(function(e) {
e.stopPropagation();
})
$(document).ready(function() { function visible($e) { if( $e.is(':visible') ) { return true; } else { return false; } } $('.nav .parent').find('ul').hide(); $(".child > a").click(function(e) { e.stopPropagation(); }) $(document).delegate('.parent', 'click', function() { var $this = $(this), $child = $this.children('ul'); if( visible( $child ) ) { $child.slideUp(); } else { $child.slideDown(); } return false; }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="nav"> <ul> <li class="parent">Media <ul> <li class="parent">Videos <ul> <li class="child"><a href="http://www.google.co.in">Overview</a></li> <li class="child"><a href="http://www.google.co.in">Add</a></li> </ul> </li> <li class="parent">Music <ul> <li class="parent">Albums <ul> <li class="child"><a href="http://www.google.co.in">Overview</a></li> <li class="child"><a href="http://www.google.co.in">Add</a></li> </ul> </li> </ul> </li> </ul> </li> </ul> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.