Question

我正在尝试使用jquery为Intranet创建一个水平可点击菜单。一切正常，直到你点击子div的一个链接 - 这只会使整个div再次消失。这是我的第一次尝试，所以我希望我已经解释好了，我真的很感激一些帮助。

脚本：

$(function(){ 
    $("#nav1").click(function(event) {
        event.preventDefault();
        $("#teams").slideToggle();
    });
    $("#teams a").click(function(event) {
        event.preventDefault();
        $("#teams").slideUp();
    });
});

HTML：

<div id="nav1outer">
  <a href="#" id="nav1"> Link 1</a>
  <div id="teams"> 
    <ul>
      <li><a href="http://child1.com">Child 1</a></li>
      <li><a href="http://child2.com">Child 2</a></li>
      <li><a href="http://child3.com">Child 3</a></li>
    </ul>
  </div>
</div>

非常感谢杰恩

Answer 1

我假设您的标记实际上看起来像这样

<div id="nav1outer">
  <a href="#" id="nav2"> Link 1</A> 
  <div id="systems"> 
    <ul>
      <li><a href="##">Child 1</a></li>
      <li><a href="##">Child 2</a></li>
      <li><a href="##">Child 3</a></li>
    </ul>
  </div>
</div>

在您的代码中，当您单击其中的任何锚标记时，您告诉它隐藏/显示系统div。

$(function(){ 
    $("#nav2").click(function(event) { //Click on Nav2 = toggle child div
        event.preventDefault(); 
        $("#systems").slideToggle();
    }); 

    $("#systems a").click(function(event) { //Click on any child anchor tag = slideup system div
        event.preventDefault(); 
        $("#systems").slideUp();
    });
});

看看这个fiddle

Answer 2

您可以做的是将单击事件绑定到文档，如果单击下拉列表中的内容，则会隐藏下拉列表，但如果单击下拉列表中的内容，则不会隐藏它，因此您的“show”事件（或slidedown或其他任何显示下拉列表）

    $("#nav1").click(function(event) {        
        $("#teams").slideToggle();
        $(document).bind('click', function (e) {
            var clicked = $(e.target);
            if (!clicked.parents().hasClass("nav1outer")) {
                 $('#teams').slideUp();
                 $(document).unbind('click');
            }
        });
    });

最后一部分是取消绑定点击事件（如上所示），以便它可以再次打开

$(document).unbind('click');

单击链接时子div关闭

2 个答案: