Question

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

VMware WebClient

HTML

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


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

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>

Answer 2

您可以为他们提供相同的课程，即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;
});

如果您不想更改课程，可以使用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

您可以在click事件中单击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关闭另一个下拉列表？

3 个答案: