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

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();

段：

＆＃13;

＆＃13;

$(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');
    }
  });
});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;