如何使用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结构在.dropdown嵌套了.v-dropdown 。 如果不是，则调整选择器以使用.next()东西，或者使用其他东西来找到与单击的元素相关的下拉列表，而不是.find() 。

更新

这是功能的一个非常基本的提琴 。 您的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;
});

如果您不想更改类，则可以使用“ 属性开始于选择器”

尝试这个

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

因此，当您按下一个按钮时，另一个按钮也会滑动。