點擊一個鏈接時，子div關閉

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

你可以做的是綁定一個click事件，將隱藏下拉如果單擊下拉列表之外的東西的文件，但如果不會隱藏它裏面的東西下拉菜單被點擊時，讓你的「秀」事件（或了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'); 
      } 
     }); 
    }); 

最後一部分是解除綁定click事件（如上圖所示），以便它可以再次打開

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