两个菜单的jQuery if else或switch语句

Question

我的网站上有一个菜单按钮，它会打开一个带有选项的菜单栏。当您单击其中一个选项时，它会在下面打开一个新 div，其中包含包含信息的 PDF。一切正常，但我有一个主要问题。当我单击新链接时，旧链接不会消失。我的链接不断堆叠在一起，我必须再次单击所有链接才能使新的 div 消失。

我正在研究一个 switch 语句来解决这个问题。就像用户点击一个菜单选项，菜单选项打开，然后如果他们点击另一个菜单选项，旧的菜单选项关闭，新的选项打开。

这是我目前的代码，

$(document).ready(function() {

$( "#mainMenu" ).click(function() {
$( "#flexMenu" ).toggle("slow");
});

/*If mainMenu closes, close all over menus*/

/*if dinnerButton is pressed, close any other menus open besides mainMenu 
  than open dinner menu*/

$( "#dinnerButton" ).click(function() {
$( "#menuDropDinner" ).toggle("slow");
});

$( "#lunchButton" ).click(function() {
$( "#menuDropLunch" ).toggle("slow");
});

$( "#wineButton" ).click(function() {
$( "#menuDropWine" ).toggle("slow");
});

$( "#dolciButton" ).click(function() {
$( "#menuDropDolci" ).toggle("slow");
});

});

一系列 if else 语句会比可能的 switch 语句更容易吗？

到目前为止我所拥有的示例在这里。您可以通过按“菜单”链接以及其中的选项来了解我在说什么。

www.littleroomproductions.com/roma/

Answer 1

1. 总是显式地向下滑动/向上滑动（或显示（）/隐藏（），或其他）。当只有一个元素被操作时，切换的想法很棒，但当多个元素可以打开/关闭时，最好是明确的。

2. 给所有一个类（例如divBtn）并使用它来确定一个按钮被点击（任何按钮）。

3. 为所有下拉菜单 DIV 赋予一个类，每次单击按钮时，关闭所有下拉菜单 div（即使是已经关闭的）。

4. 在“名称”和“按钮”之间添加一个连字符或_下划线（例如dinner_Button），然后提取该名称以用于打开正确的下拉菜单。

代码示例：

jsFiddle Demo

jQuery/javascript:

$(document).ready(function(){
    $('.divBtn').click(function(){
        $('.dropDIV').slideUp(); //close all drop menu divs

        var mnu = this.id.split('_')[0];
        mnu = toTitleCase(mnu);
        $('#menuDrop'+mnu).slideDown('slow'); //open the correct drop menu
    });
});

function toTitleCase(str){
    return str.replace(/\w\S*/g, function(txt){
        return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
    });
}

---

如果再次单击相同的按钮，要使按钮slideUp() 成为打开的 DIV，只需添加一个测试：仅当 div 不可见时才打开该 div：

Revised jQuery Demo

var mnu = this.id.split('_')[0];
mnu = toTitleCase(mnu);
if ( !$('#menuDrop'+mnu).is(':visible') ){
    $('#menuDrop'+mnu).slideDown('slow');
}

注意：遇到错误 - 仍在使用 .toggle() 而不是显式 slideDown。固定。