javascript - 如何使用 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

这是一个想法。让所有下拉菜单都属于同一类。点击时隐藏所有下拉菜单，仅向下滑动点击的下拉菜单；

$('.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>