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

我认为你需要使用jquery的stopPropagation方法。

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

Answer 2

你应该给所有元素类＆＃34; A＆＃34;例如然后在类A的onclick上检查元素的id是否不是例外id切换它... $（＆＃34; .A＆＃34）。在（＆＃34;单击＆＃34;，函数（）{

如果（$（本）.attr（＆＃34; ID＆＃34;！）=＆＃34; B＆＃34） $（本）.fadeToggle（）

}）

Answer 3

也许这段代码可以帮到你

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

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

});

切换单击除了一个元素

3 个答案: