javascript - 打开一个下拉菜单并关闭另一个

Question

当我明确单击另一个下拉列表时，我希望关闭另一个下拉列表。

我已经从各个地方撕下了这个 JS - 我知道我这样做完全错误。我尝试破解从堆栈溢出中找到的其他一些示例，但无法完全弄清楚如何将其应用到我的代码中

$(function () {
  $('.click-nav1 > ul').toggleClass('no-js js');
  $('div.user_dropdown').hide();
  $('.click-nav1 .js').click(function(e) {
    $('div.user_dropdown').slideToggle(0);
    $('.clicker').toggleClass('active');
    e.stopPropagation();
  });
  $(document).click(function() {
    if ($('div.user_dropdown').is(':visible')) {
      $('div.user_dropdown', this).slideToggle(0);
      $('.clicker').removeClass('active');
    }
  });
});



$(function () {
  $('.click-nav2 > ul').toggleClass('no-js js');
  $('div.more_dropdown').hide();
  $('.click-nav2 .js').click(function(e) {
    $('div.more_dropdown').slideToggle(0);
    $('.clicker').toggleClass('active');
    e.stopPropagation();
  });
  $(document).click(function() {
    if ($('div.more_dropdown').is(':visible')) {
      $('div.more_dropdown', this).slideToggle(0);
      $('.clicker').removeClass('active');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="click-nav1">
    <ul class="no-js">
        <li class="avatar clicker">
              {{ gravatamatic:quicky
                  email = "{current_member:email}"
                  size  = "50"
              }}
        </li>
    </ul>
    </div>
    <div class="click-nav2">
      <ul class="no-js">
        <li class="clicker"><a href="#search" class="global_btn icon_btn"><span class="icon-more"></span></a>
        </li>
      </ul>
    </div>

<div class="dropdown user_dropdown">
  <ul>
  <li>content</li>
  </ul>
</div>
<div class="dropdown more_dropdown">
  <ul>
  <li>content</li>
  </ul>
</div>

Answer 1

你可以隐藏另一个div:

例如:$('div.more_dropdown').hide();

片段:

$(function() {
  $('.click-nav1 > ul').toggleClass('no-js js');
  $('div.user_dropdown').hide();
  $('.click-nav1 .js').click(function(e) {
    $('div.user_dropdown').slideToggle(0);
    $('div.more_dropdown').hide();

    $('.clicker').toggleClass('active');
    e.stopPropagation();
  });
  $(document).click(function() {
    if ($('div.user_dropdown').is(':visible')) {
      $('div.user_dropdown', this).slideToggle(0);
      $('.clicker').removeClass('active');
    }
  });
});



$(function() {
  $('.click-nav2 > ul').toggleClass('no-js js');
  $('div.more_dropdown').hide();
  $('.click-nav2 .js').click(function(e) {
    $('div.more_dropdown').slideToggle(0);
    $('.user_dropdown').hide();
    $('.clicker').toggleClass('active');
    e.stopPropagation();
  });
  $(document).click(function() {
    if ($('div.more_dropdown').is(':visible')) {
      $('div.more_dropdown', this).slideToggle(0);
      $('.clicker').removeClass('active');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="click-nav1">
  <ul class="no-js">
    <li class="avatar clicker">
      {{ gravatamatic:quicky email = "{current_member:email}" size = "50" }}
    </li>
  </ul>
</div>
<div class="click-nav2">
  <ul class="no-js">
    <li class="clicker"><a href="#search" class="global_btn icon_btn"><span class="icon-more">second</span></a>
    </li>
  </ul>
</div>

<div class="dropdown user_dropdown">
  <ul>
    <li>content</li>
  </ul>
</div>
<div class="dropdown more_dropdown">
  <ul>
    <li>content2</li>
  </ul>
</div>