jQuery否單擊父元素內的元素時發生切換

Question

我有一個簡單的搜索表單，單擊鏈接時會切換。當我嘗試單擊表單內的文本輸入字段時，列表項上的切換觸發，表單又被隱藏起來。我相信這是由於該表單是父元素的子元素。有沒有辦法讓切換類在父元素而不是子元素上工作？謝謝你的幫助。

的jQuery：

$('li.search').click(function(){ 
    $('#search-box-container').toggle("fast"); 
}); 

HTML：

<li class="search"><a href="#">SEARCH 
    <ul id="search-box-container" style="display: none;"> 
     <li> 
      <form name="catsearchform66594" method="post" action="/Default.aspx?SiteSearchID=2829&PageID={module_oid}"> 
       <div class="search-box"> 
        <input class="cat_textbox_small" type="text" name="CAT_Search" id="CAT_Search" /> 
        <input class="cat_button" type="submit" value="Search" /> 
       </div> 
       </form> 
     </li> 
    </ul></a> 
</li> 

Answer 1

你必須使用鋰的類名稱，但該事件源將錨標記

Live Demo

$('li.search').click(function(event){ 
    if($(event.target).parent().hasClass("search")) 
     $('#search-box-container').toggle("fast"); 
}); 

您可以使用event.target.tagName來跳過執行。

Live Demo

$('li.search').click(function(event){ 
    if(event.target.tagName == "A") 
     $('#search-box-container').toggle("fast"); 
});