Переключить на клик, за исключением одного элемента

Question

Учитывая следующую структуру html, как сделать #top-bar-toggle переключиться на клик, кроме как при нажатии .top-bar-menu-search или его детей?

<div id="top-bar-toggle"> 
    <div id="top-bar-menu"> 
     <ul class="vertical menu"> 
      <li> 
       <a href="home_link"><h2>Home Item</h2></a> 
      </li> 
      <li> 
       <a href="other_link"><h2>Other Item</h2></a> 
       <ul class="nested vertical menu"> 
        <li><a href="nested_link"><h2>Nested Item</h2></a></li> 
        <li><a href="nested_link"><h2>Nested Item</h2></a></li> 
        <li><a href="nested_link"><h2>Nested Item</h2></a></li> 
       </ul> 
      </li> 
      <li> 
       <a href="other_link"><h2>Other Item</h2></a> 
       <ul class="nested vertical menu"> 
        <li><a href="nested_link"><h2>Nested Item</h2></a></li> 
        <li><a href="nested_link"><h2>Nested Item</h2></a></li> 
        <li><a href="nested_link"><h2>Nested Item</h2></a></li> 
       </ul> 
      </li> 
      <li class="top-bar-menu-search"> 
       <form id="searchform" method="get" role="search"> 
        <div class="input-group"> 
         <span class="input-group-label"></span> 
         <input type="text" placeholder="Search" id="s" name="s" value="" class="input-group-field"> 
        </div> 
       </form> 
      </li> 
     </ul> 
    </div> 
</div> 

Я думал, что следующий код JQuery будет работать, но #top-bar-toggle элемент получает переключены все равно ...

$('#top-bar-toggle').not('.top-bar-menu-search').click(function() { 
    $(this).fadeToggle(); 
}); 

Спасибо заранее!

Answer 1

Я думаю, что вы необходимо использовать метод stopPropagation для jquery.

$('#top-bar-toggle').click(function() { 
    console.log("topbar clicked"); 
    }); 
    $('.top-bar-menu-search').click(function(e) { 
    e.stopPropagation(); 
    console.log("searchbar clicked"); 
    }); 

Answer 2

вы должны указать все элементы класса «A», например, затем onclick класса A проверить, не равен ли id элемента исключенному идентификатору id ... $ (". A"). On ("click" функция() {

если ($ (это) .attr ("ID")! = "B") $ (это) .fadeToggle()

})

Answer 3

Может быть, этот код поможет вам

$('#top-bar-menu>ul>li>a').on('click', function(e) { 
    e.preventDefault(); 

    $(this).siblings('ul').toggle(); 

});