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

Question

我的网站上有一个菜单按钮，它会打开一个带有选项的菜单栏。当您单击其中一个选项时，它会在下面打开一个新的 div，其中包含包含信息的 PDF。一切正常，但我有一个主要问题。当我点击新的 link 时，旧的 link 并没有消失。我的 link 不断堆叠在一起，我必须再次单击所有这些才能使新的 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 语句更简单？

我目前所拥有的例子在这里。您可以通过按菜单 link 和来自它的选项来了解我在说什么。

www.littleroomproductions.com/roma/

Answer 1

总是显式 slideDown/slideUp（或显示（）/隐藏（），或其他）。当只操作一个元素时，切换的想法很棒，但是当可以操作多个元素时 open/closed，最好是明确的。
给所有一个class（例如divBtn）并用它来确定一个按钮被点击（任何按钮）。
给所有下拉菜单 DIV 一个 class 并且，每次单击按钮时，关闭所有下拉菜单 div（即使是已经关闭的） ).
在 "name" 和 "Button" 之间添加连字符或_下划线（例如 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 为不可见：

Revised jQuery Demo

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

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

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

jQuery if else or switch statement for two menus

jquery

if-statement

switch-statement