Question

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

始终显式slideDown / slideUp（或show（）/ hide（）或其他）。当只有一个元素被操纵时，切换的想法是很好的，但是当几个元素可以打开/关闭时，最好是明确的。
提供所有课程（例如divBtn）并使用它来确定点击了按钮（任何按钮）。
给所有下拉菜单DIV一个类，每次单击一个按钮，关闭所有下拉菜单div（即使已经关闭的菜单）。
在＆＃34; name＆＃34;之间加一个连字符或_underscore。和＆＃34;按钮＆＃34; （例如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。固定的。

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

1 个答案: