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

我有两个下拉列表&一个打开，另一个不关闭。 我想使用if-else语句，但我不太熟悉JavaScript代码

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


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

HTML

这里有一个想法。把所有的下拉列表都放在同一个类中。单击时隐藏所有下拉列表，仅向下滑动单击的下拉列表

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

li{
背景色：#333；
颜色：#fff；
填充：5px20px；
文本对齐：居中；
列表样式：无；
边框底部：1px实心#666；
a{
颜色：#fff；
}
}
.顶{
保证金：0；
填充：0；
宽度：50%；
浮动：左；
}
.下拉列表{
光标：指针；
显示：块；
&：悬停{
背景色：#444；
}
}
.v-下拉列表{
显示：无；
}


标题










标题








这里有一个想法。把所有的下拉列表都放在同一个类中。单击时隐藏所有下拉列表，仅向下滑动单击的下拉列表

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

li{
背景色：#333；
颜色：#fff；
填充：5px20px；
文本对齐：居中；
列表样式：无；
边框底部：1px实心#666；
a{
颜色：#fff；
}
}
.顶{
保证金：0；
填充：0；
宽度：50%；
浮动：左；
}
.下拉列表{
光标：指针；
显示：块；
&：悬停{
背景色：#444；
}
}
.v-下拉列表{
显示：无；
}


标题










标题








您可以给它们相同的类，即
下拉列表
和
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;
});

您可以给它们相同的类，即
下拉列表
和
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;
});

单击事件时，您可以滑动切换两个下拉列表

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


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

因此，当您按下其中一个按钮时，另一个按钮也会滑动切换。
您可以在单击事件时滑动切换（）两个下拉列表

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


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

因此，当你按下一个按钮时，另一个也会滑动切换。
你能发布你在js代码中引用的
HTML
元素吗？更好的是，在上设置一个示例你能发布你在js代码中引用的
HTML
元素吗？更好的是，设置一个示例，说明你尝试了什么解决方案？您在控制台中有任何错误吗？什么不起作用？我看到了你的HTML，在我的第一个建议中发现了一个错误，将
find（）
函数更改为
next（）
。我已经更新了我的答案。我尝试了你给出的第二个例子。这有助于关闭下拉列表。但当我只有一个打开的下拉列表并尝试关闭它时，它会再次打开。不客气；）但是，为了记录在案，第一个示例会更好，因为您抽象了
下拉列表
和
v-dropdown
类，并且可以添加一些具有相同html结构的其他下拉列表，而无需更改javascript代码。您好。你能告诉我当我改变页面时如何打开下拉列表吗？你尝试了什么解决方案？您在控制台中有任何错误吗？什么不起作用？我看到了你的HTML，在我的第一个建议中发现了一个错误，将
find（）
函数更改为
next（）
。我已经更新了我的答案。我尝试了你给出的第二个例子。这有助于关闭下拉列表。但当我只有一个打开的下拉列表并尝试关闭它时，它会再次打开。不客气；）但是，为了记录在案，第一个示例会更好，因为您抽象了
下拉列表
和
v-dropdown
类，并且可以添加一些具有相同html结构的其他下拉列表，而无需更改javascript代码。您好。你能告诉我当我更改页面时如何打开下拉列表吗？编辑了我的答案-请注意CSS是SCSS格式-从JS Fiddle复制的，但这与答案并不相关。编辑了我的答案-请注意CSS是SCSS格式-从JS Fiddle复制的，但这与答案无关。如果我理解正确，当你按下y下拉键时，你想关闭x下拉键。上面的代码片段符合您的要求。如果我理解正确，您希望在按下y下拉键时关闭x下拉菜单。上面的代码片段符合您的要求。