javascript - 如何停止事件传播到具有相同类的其他元素？

Question

我编写了这个绑定(bind)到按钮的函数，单击该按钮会切换类以提供下拉列表。唯一的问题是我在同一页面上有多个具有相同功能的按钮，并且单击其中一个按钮时它们都会触发:

app.bind.DirectionDropdown = function(){
    $('.direction-button').bind('click', function(){
        $('.direction-dropdown').toggleClass('active');
    });
    
};

这是 HTML:

<div class="contact-card">

      <div class="contact-directions">
        <ul class="contact-directions-items">
          <li class="map-pin contact-directions-item"><a href="#"><span class="fa fa-map-marker"></span></a></li>
          <li class="contact-directions-item"><p>3700-1 Place Ville Marie</p></li>
          <li class="contact-directions-item"><p>Montreal, Quebec</p></li>
          <li class="contact-directions-item"><p>H3B 3P4 Canada</p></li>
        </ul>
        <a href="#" title="#" class="link-button direction-button animate-after">Directions</a>
      </div><!-- end .contact-directions -->

    </div><!-- end .contact-card -->

    <div class="direction-dropdown fade-in">
    
      <h4>Direction on how to get here...</h4>

      <a href="#" class="link-button direction-button">Close</a>

        <!-- content --> 

    </div><!-- end .direction-dropdown -->

如何编辑此函数以仅在单击的一个按钮上触发，而不在其他按钮上触发？

Answer 1

该事件不会传播到其他按钮，但在单击事件中您会再次选择所有按钮。使用 this 仅选择被单击的按钮。

app.bind.DirectionDropdown = function(){
    $('.direction-button').bind('click', function(){
        $('.direction-dropdown').removeClass('active');
        $(this).parent().addClass('active');
    });
};

或者，如果您希望能够通过再次单击同一按钮来关闭菜单:

app.bind.DirectionDropdown = function(){
    $('.direction-button').bind('click', function(){
        // Remove the class from all others, excluding the clicked one.
        $('.direction-dropdown').not($(this).parent()).removeClass('active');
        // Toggle for the clicked one.
        $(this).toggleClass('active');
    });
};