0

即使在阅读jQuery stopPropagation for only some class of elements、Javascript toggle class on element和无数其他参考资料之后，也很难解决这个问题。

我想在单击 nav > ul > li AND .dd-toggle（.dropdown 的子项）时切换类“活动”，但不是 .dropdown 本身或其中的任何内容（.dd-toggle 除外）。

<nav class="nav-dropdowns" role="navigation">
    <ul>
        <li class="">
            <span class="dropdown-title">Price</span>
            <div class="dropdown">
                <a class="dd-toggle">X</a>
                <div id="field-price" class="field"><label>Price Range</label>
                    <div class="details"></div>
                </div>
                </div> <button type="submit" class="extra-submit buttonstyle">Search</button>
            </div>
        </li>
        <li class="">
            <span class="dropdown-title">Type</span>
            <div class="dropdown">
                <a class="dd-toggle">X</a>
                <div id="field-type" class="field"><label>Property Type</label>
                    <div class="details"></div>
                </div> <button type="submit">Search</button>
            </div>
        </li>
        <li class="search-submit">
            <button class="search-button" type="submit">Search</button>
        </li>
    </ul>
</nav>

我尝试了许多变化，从以下开始：

jQuery(document).ready(function($){
    $( "nav > ul > li" ).click(function() {
      $( this ).closest().toggleClass( "active" );
    });
});

然后

jQuery(document).ready(function($){
    $( "nav > ul > li" ).click(function() {
      $( this ).toggleClass( "active" );
    });
    $('.dropdown').click(function(e) {
      return false;
    });
});

最后

jQuery(document).ready(function($){
    $( "nav > ul > li" ).click(function( event ) {
        event.stopImmediatePropagation();      
    $( this ).toggleClass( "active" ).not('.dropdown');
    });
});

我忽略了或最接近的孩子，但不知道该怎么做，但仍然观察孩子的孩子。也许只有第一个孩子的？

忽略 .dropdown 但不忽略 .dd-toggle

我接近了吗？

4

1 回答 1

1

我真的建议阅读：

解耦您的 HTML、CSS 和 JavaScript。它确实会减少您的紧密耦合代码。

绿色的一切都会变成红色，除非你是蓝色的（绿色）。虽然我不确定（因为您的问题不清楚）如果您要求在 theli和 the 上.dd-toggle（现在这样）或仅在liwhich 上不难。

如果您只需要活动，li只需将.dd-toggle代码更改为：

$(this).parents('li').first().toggleClass('active');

CodePen.IO 工作示例

$(document).ready(function() {
  $("nav > ul > li").on("click", function(e) {
    if ($(e.target).parents('.dropdown').length === 0 &&
      !$(e.target).hasClass('dropdown')) {
      $(this).toggleClass("active");
    }
  });
  $(".dd-toggle").on("click", function(e) {
    $(this).toggleClass("active");
  });
});
nav > ul > li, .dd-toggle {
  border: 2px solid green;  
  cursor: pointer;
  user-select: none;
}

.active {
  border: 2px solid red;
}

.dropdown {
  border: 2px solid blue;
  cursor: default;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="nav-dropdowns" role="navigation">
  <ul>
    <li class="">
      <span class="dropdown-title">Price</span>
      <div class="dropdown">
        <a class="dd-toggle">X</a>
        <div id="field-price" class="field"><label>Price Range</label>
          <div class="details"></div>
        </div>
      </div> <button type="submit" class="extra-submit buttonstyle">Search</button>
      </div>
    </li>
    <li class="">
      <span class="dropdown-title">Type</span>
      <div class="dropdown">
        <a class="dd-toggle">X</a>
        <div id="field-type" class="field"><label>Property Type</label>
          <div class="details"></div>
        </div> <button type="submit">Search</button>
      </div>
    </li>
    <li class="search-submit">
      <button class="search-button" type="submit">Search</button>
    </li>
  </ul>
</nav>

于 2019-12-04T17:00:15.130 回答