javascript - 单击另一个 div 时删除一个 div 上的类

Question

以下是我的 HTML，

 <div class="container">
  <ul class="navbar">
    <li class="nb-link"><a>Home</a></li>

    <li class="dropdown">
      <a>CBSE</a>
      <ul class="dropdown-menu">
        <li>10th Standard</li>
        <li>12th Standard</li>
      </ul>
    </li>

    <li class="dropdown">
      <a>Engineering</a>
      <ul class="dropdown-menu">
        <li>JEE - Main</li>
        <li>JEE - Advanced</li>
      </ul>
    </li>
  </ul>

我有 2 个下拉菜单。当我单击一个时，它会下降。但是当我点击另一个时，即使是那个也没有关闭前一个。这会产生重叠。我使用 JS 处理这个的方式如下

 $(document).ready(function() {
    $('.dropdown').click(function() {
        var $this = $(this);

      if ($this.children('.dropdown-menu').hasClass('open')) {
        $this.removeClass('active');
        $('.navbar').$this.children('.dropdown-menu').removeClass('open');
        $this.children('.dropdown-menu').fadeOut("fast");
      } 


        else {
          $this.addClass('active');
          $this.children('.dropdown-menu').addClass('open');
          $this.children('.dropdown-menu').fadeIn("fast");
        }

    });

});

如何使用 JS 实现功能，以便在单击新下拉菜单时关闭上一个下拉菜单？此外，单击页面上的任何位置时，下拉菜单应该关闭吗？

Answer 1

可以试试这个

$(document).ready(function() {
    $('.dropdown').click(function() {
        var $this = $(this);
        $('.dropdown').not($this).removeClass('active')
        $('.dropdown-menu').not($this.find('.dropdown-menu')).removeClass('open');
        $this.toggleClass('active');
        $this.find('.dropdown-menu').toggleClass('open');
    });
});

Working Demo

如果选择器不是目标，你可以使用这个函数

// function for if selectors not target
function actionwindowclick(e , selector , action){
            if (!$(selector).is(e.target) // if the target of the click isn't the container...
                && $(selector).has(e.target).length === 0) // ... nor a descendant of the container
            {
            action();
        }
}

你可以像这样在窗口点击事件中使用它

$(window).on('click', function(e){
     actionwindowclick(e , ".dropdown , .dropdown-menu" , function(){
         $('.dropdown').removeClass('active')
         $('.dropdown-menu').removeClass('open');
     });
});

Working Demo

Note: I think you may need to event.stopPropagation() while you trying to click on .dropdown-menu itself

$('.dropdown-menu').click(function(e) {
   e.stopPropagation()
});