如何使用 JavaScript 打开一个下拉菜单并关闭另一个下拉菜单？

Question

我有这两个下拉菜单，当一个打开时，另一个不会关闭。我想使用 if-else 语句，但我对 JavaScript 代码不是很熟悉。

$(".dropdown").on( "click", function() {
    $(".v-dropdown").slideToggle();
    return false;
});


$(".dropdown2").on( "click", function() {
    $(".v-dropdown2").slideToggle();
    return false;
});

HTML

<ul>
<li><a  class="dropdown" data-hover="title">title</a>
<ul class="v-dropdown2">
<li><a href="#" data-hover="1">1</a></li>
<li><a href="#" data-hover="2">2</a></li>
<li><a href="#" data-hover="3">3</a></li>
<li><a href="#" data-hover="4">4</a></li>
</ul>

<li>
<a class="dropdown2" data-hover="title">title</a>
<ul class="v-dropdown2">
<li><a href="#" data-hover="1">1</a></li>
<li><a href="#" data-hover="2">2</a></li>
<li><a href="#" data-hover="3">3</a></li>
<li><a href="#" data-hover="4">4</a></li>
</ul>
</ul>

Answer 1

这是一个主意。给所有下拉列表相同 class。单击时隐藏所有下拉菜单，只在单击的下拉菜单中滑动；

$('.dropdown').on('click', function() { // <-- all drop downs should have the class .dropdown
    $('.v-dropdown').slideUp(); // <-- all sections to slide should have the class .v-dropdown
    $(this).find('.v-dropdown').slideDown(); // slide down only this element
});

这假设您的 html 结构有 .v-dropdown 嵌套在 .dropdown 中。如果不是，则调整选择器以使用 .next() 之类的东西或其他东西来找到与单击元素相关的下拉菜单而不是 .find().

更新

Here's a very basic fiddle 的功能。您的 HTML 无效，因此我已将其修改为可用。

$(function() {

  $('.dropdown').on('click', function() {
    var slide_el = $(this).next().find('.v-dropdown');

    // don't slide up if clicking on the already visible element
    if (!slide_el.is(':visible')) {
      $('.v-dropdown').slideUp();
    }
    slide_el.slideToggle(); // only slide clicked element
  });

});

li {
  background-color: #333;
  color: #fff;
  padding: 5px 20px;
  text-align: center;
  list-style: none;
  border-bottom: 1px solid #666;
  a {
    color: #fff;
  }
}

.top {
  margin: 0;
  padding: 0;
  width: 50%;
  float: left;
}

.dropdown {
  cursor: pointer;
  display: block;
  &:hover {
    background-color: #444;
  }
}

.v-dropdown {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="top">
  <li class="dropdown" data-hover="title">title</li>
  <li>
    <ul class="v-dropdown">
      <li><a href="#" data-hover="1">1</a></li>
      <li><a href="#" data-hover="2">2</a></li>
      <li><a href="#" data-hover="3">3</a></li>
      <li><a href="#" data-hover="4">4</a></li>
    </ul>
  </li>
</ul>

<ul class="top">
  <li class="dropdown" data-hover="title">title</li>
  <li>
    <ul class="v-dropdown">
      <li><a href="#" data-hover="1">1</a></li>
      <li><a href="#" data-hover="2">2</a></li>
      <li><a href="#" data-hover="3">3</a></li>
      <li><a href="#" data-hover="4">4</a></li>
    </ul>
  </li>
</ul>

Answer 2

您可以给它们相同的 class，即 dropdown 和 v-dropdown，代码将是

$(".dropdown").on( "click", function() {
    var current_dropdown = $(this).next(".v-dropdown");
    $(".v-dropdown").not(current_dropdown).slideUp();
    current_dropdown.slideToggle();
    return false;
});

如果您不想更改 classes 您可以使用 Attribute Starts With Selector

试试这个

$(".dropdown").on( "click", function() {
    var current_dropdown = $(".v-dropdown");
    $("[class^=v-dropdown]").not(current_dropdown).slideUp()
    current_dropdown.slideToggle();
    return false;
});


$(".dropdown2").on( "click", function() {
    var current_dropdown = $(".v-dropdown2");
    $("[class^=v-dropdown]").not(current_dropdown).slideUp()
    current_dropdown.slideToggle();
    return false;
});

Answer 3

您可以在单击事件时只对两个下拉菜单进行 slideToggle()。

$(".dropdown").on( "click", function() {
    $(".v-dropdown").slideToggle();
    $(".v-dropdown2").slideToggle();
    return false;
});


$(".dropdown2").on( "click", function() {
    $(".v-dropdown2").slideToggle();
    $(".v-dropdown").slideToggle();
    return false;
});

所以当你按下一个时，另一个也会滑动切换。

如何使用 JavaScript 打开一个下拉菜单并关闭另一个下拉菜单？

How to open a dropdown and close another dropdown with JavaScript?

javascript

jquery

drop-down-menu

dropdown