javascript - 不允许同时打开具有相同类别的两个菜单

Question

我不希望两个菜单能够同时打开。我想要的:如果一个菜单打开并且您单击下一个菜单，第一个菜单将关闭。我包含了我的 jsfiddle，这样您就可以更好地了解我在寻找什么，jQuery 2.1 已启用。

看这里: https://jsfiddle.net/blomberg/y0bxL2sL/1/

$(document).ready(function() {
  $.fn.dropDown = function(hiddenClass) {
    var that = this;
    $('html').click(function() {
      that.each(function() {
        $(this).find('.smaller_ul_list').addClass(hiddenClass);
      });
    });
    return this.each(function() {
      var $this = $(this);
      $this.data('desktop__menuTrigger', true);
      $this.find('.smaller_ul_list').addClass(hiddenClass);
      $this.click(function(e) {
        $(this).find('.smaller_ul_list').toggleClass(hiddenClass);
        e.stopPropagation();
        if ($(e.target).parent().data('desktop__menuTrigger')) {
          e.preventDefault();
        }
      });
    });
  }
  $('.desktop__menu').dropDown('hidden');
});

.main-hamburger-menu {
  display: block;
  width: 28px;
  float: left;
  height: 100%;
  margin-left: 14px;
}
/* DESKTOP MENU */

.hidden {
  display: none
}
.desktop__menu {
  .bigger_ul_list {
    .smaller_ul_list {
      width: 200px;
      border: 2px solid gray;
      border-bottom: none;
      /* height: 350px; */
      background: gray;
      /* overflow-y: scroll; */
      margin-top: -20px;
      /* border-radius: 8px; */
      li {
        clear: both;
        height: 47px;
        border-bottom: 2px solid gray;
        line-height: 47px;
        letter-spacing: .3px;
        padding-right: 15px;
        text-transform: uppercase;
        font-size: 15px;
        font-weight: 700;
        &: hover {
          background: #fff;
        }
      }
      li:first-child {
        border-radius: 8px 8px 0 0;
      }
      img {
        width: 30px;
      }
      a {
        color: gray;
        text-decoration: none;
        li {
          border-bottom: 2px solid gray;
          line-height: 47px;
          letter-spacing: .3px;
          padding-right: 15px;
          text-transform: uppercase;
          font-size: 15px;
          color: black;
          &: hover {
            background: #fff;
          }
        }
      }
    }
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="main-hamburger-menu">
  <div class="desktop__menu">
    <ul class="bigger_ul_list">
      <li class="dropdown__desktop"><a href="javascript:void(0);">Click me</a>
        <ul class="smaller_ul_list">
          <li>test</li>
        </ul>
      </li>
    </ul>
  </div>
</div>

<br>
<br>
<br>

<div class="main-hamburger-menu">
  <div class="desktop__menu">
    <ul class="bigger_ul_list">
      <li class="dropdown__desktop"><a href="javascript:void(0);">Click me</a>
        <ul class="smaller_ul_list">
          <li>test</li>
        </ul>
      </li>
    </ul>
  </div>
</div>

Answer 1

您可以通过在切换预期元素时隐藏所有其他 .smaller_ul_list 元素来实现此目的。试试这个:

$this.click(function(e) {
    var $smallerUlList = $(this).find('.smaller_ul_list').toggleClass(hiddenClass);
    $('.smaller_ul_list').not($smallerUlList).addClass(hiddenClass);
    e.stopPropagation();
    if ($(e.target).parent().data('desktop__menuTrigger')) {
        e.preventDefault();
    }
});

Updated fiddle