Question

我有一组嵌套的DIV，当用户点击它们时，使用jQuery进行slidetoggle。在最里面的DIV内部有一个带有HREF的锚标签，它应该在某处导航。问题是，当我点击链接时，它就像父DIV一样滑动，而不是导航到网址。如果我右键单击锚点并选择在新选项卡中打开，那么导航就可以了。请问你能发现什么问题吗？感谢

  <div class="pod"> 
    <li id='ThirdParty'> 
        <div class='block'> 
            <h1>ThirdParty</h1>
            <div class='systemHeader'> 
                <h2><span>Bobs shop</span></h2> 
                <div class='subSystems'>                     
                    <div class='subSystemHeader'> 
                        <h3><span>&nbsp;Gifts</span></h3> 
                        <div class='reports '> 
                            <p class='reports i1'> 
                                <a href='/Next.Whs.Web.MenuSystem/Default.aspx?id=470' title=''>Option 1</a></p> 
                        </div> 
                    </div> 
                </div> 
            </div> 
        </div> 
    </li> 
</div>

    $("div.subSystemHeader, div.subSystemHeader").click(function() { 
   $("> div", this).slideToggle(...); 
   return false; 
});

Answer 1

您可以检查点击的事件对象，然后检查事件目标 - 另请参阅http://api.jquery.com/event.target/

 $("div.subSystemHeader, div.subSystemHeader").click(function(event) { 
   if(event.target.nodeName.toLowerCase() == 'a') return;
 ...
 }

（没有测试它，但它应该工作）

Answer 2

此处有一些更改，无需重复相同的选择器，并检查事件是否来自<a>标记，如下所示：

$("div.subSystemHeader").click(function(e) { 
  if(e.target.nodeName == 'A') return; //skip this handler, don't return false
  $("> div", this).slideToggle(...); 
  return false; 
});

You can test it here。如果事件目标来自<a>（没有它的子项），那么我们只需退出处理程序，返回undefined，因为我们没有显式返回false {{1}事件将是正常的事情......转到click。

Answer 3

您的问题是return false;，它阻止了默认行为。

$("a:eq(0)").click(function() {
    return false; /* does nothing */
});
$("a:eq(1)").click(function() {
    /* go to href */
});

的 Example on jsFiddle

Answer 4

我今天刚遇到这个问题。我发现了一篇非常有趣的文章可能有所帮助。它描述了'return false'和Jquery事件（http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/）的错误（使用）。我没有在你的例子中测试过以下代码，但我认为这应该可行。

$('.subSystemHeader a').click(function(e){
    e.stopPropagation(); 
});

当我不想要它时，jquery .click覆盖锚点href！

4 个答案: