Question

我有一个简单的搜索表单，在单击链接时切换。当我尝试单击表单内的文本输入字段时，列表项上的切换将触发，表单将再次隐藏。我确信这是由于表单是父元素的子元素。有没有办法只让toggle类在父元素上工作而不是子元素？谢谢你的帮助。

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

您必须使用li的类名，但事件源将是锚标记

<强> 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");
});

当单击父元素内的元素时，jQuery No Toggle

1 个答案: