jQuery的下拉菜單中排除孩子從功能

Question

我有這樣的事情

<div id="dropdown-menu"> 
    <div class="visiblestuff"></div> 
    <div class="foldoutstuff"> 
     <form> 
      <some input value/> 
     </form> 
    </div> 
</div> 

我希望＃下拉菜單並可以點擊，但不是它的孩子，讓我這樣做：

$(function() { 
    var DropdownChildren = $('div#dropdown').children(); 
    $('div#dropdown').not(DropdownChildren).click(function(event) { 
     var $this = $(this); 
     $this.toggleClass('active'); 
     $('.foldoutstuff').toggle(); 
    }); 
}); 

該作品爲背景但不是形式節點... 我認爲問題是由摺疊開關（）上的開關（）造成的

請指教

Answer 1

您是否試圖阻止兒童的事件傳播？

$(function() { 
    $('div#dropdown').children().click(function(event) { 
     event.stopPropagation(); 
    }); 
    $('div#dropdown').click(function(event) { 
     var $this = $(this); 
     $this.toggleClass('active'); 
     $('.foldoutstuff').toggle(); 
    }); 
}); 

Answer 2

的另一種方法，以@ Svetlin的回答（它要求較少的處理程序的約束），如下：

$(document).ready(function() { 
    $('#dropdown').bind('click', function (e) { 
     if (e.target == this) { // Check it was this element clicked on; not a child 
      var $this = $(this); 
      $this.toggleClass('active'); 
      $('.foldoutstuff').toggle(); 
     } 
    }); 
}); 

請參閱事件對象