Javascript 下拉菜单'；s Jquery

我使用jQuery构建了这个提琴，以选择一个顶部菜单，该菜单通过连续切换CSS和jQuery的隐藏/显示来显示第二个菜单div

这是可行的，但我是一个初学者，相对而言，我确信有一种更简洁、更简单的方法来编写这段代码。例如，分配类和影响所有div的更简单方法或更好地使用

this

。感谢您的帮助

$（“#主页”）。单击（函数（）{
$（此）.toggleClass（“选定”）；
$（“.secondMenu”）.hide（）；
$（“.toggle”）.removeClass（“选定”）；
$（“#home1”）.toggle（）；
});
$（“#配置文件”）。单击（函数（）{
$（“.toggle”）.removeClass（“选定”）；
$（此）.toggleClass（“选定”）；
$（“.secondMenu”）.hide（）；
$（“#profile1”）.toggle（）；
});
$（“#恢复”）。单击（函数（）{
$（“.toggle”）.removeClass（“选定”）；
$（此）.toggleClass（“选定”）；
$（“.secondMenu”）.hide（）；
$（“#resume1”）.toggle（）；
});
$（“#工作”）。单击（函数（）{
$（“.toggle”）.removeClass（“选定”）；
$（此）.toggleClass（“选定”）；
$（“.secondMenu”）.hide（）；
$（“#工作1”）.toggle（）；
});
$（“#冒险”）。单击（函数（）{
$（“.toggle”）.removeClass（“选定”）；
$（此）.toggleClass（“选定”）；
$（“.secondMenu”）.hide（）；
$（“#冒险1”）.toggle（）；
});
正文{
填充：0px；
边际：0px；
字体系列：“HelveticaNeue灯”，“Helvetica Neue灯”，“Helvetica Neue”，Helvetica，Arial，“Lucida Grande”，无衬线；
字体大小：300；
}
#顶栏{
边际：0px；
高度：50px；
宽度：100%；
背景色：#990000；
}
#主菜单{
利润率：25px0；
列表样式：无；
浮动：对；
}
#主菜单李{
浮动：左；
右边框：1px纯白；
填充：0 5px 0 5px；
颜色：白色；
}
.选定{
背景色：#3E0C0D；
边框：1px纯黑；
身高：100%；
}
.第二菜单{
位置：相对位置；
高度：30px；
宽度：100%；
背景色：#3E0C0D；
清楚:对,；
显示：无；
}
.第二菜单{
浮动：对；
利润率：8px0；
列表样式：无；
}
李先生{
浮动：左；
右边框：1px纯白；
填充：0 5px 0 5px；
颜色：白色；
字号：80%；
}
#clearDiv{
明确：两者皆有；
边际：0px；
填充：0px；
}


主页
配置文件
继续
工作示例
冒险


家
家
家
家
家
家
主页


教授
教授
教授
教授
教授
教授
教授


res
res
res
res
res
res
res


egs
egs
egs
egs
egs
egs
主页


adv
adv
adv
adv
adv
adv
主页

你的意思是

这是密码

function dropdownMenu(triger, target) {
$("#"+triger).click(function(){
    $(this).toggleClass("selected");
    $(".secondMenu").hide();
    $(".toggle").removeClass("selected");
    $("#"+target).toggle();
})    
}

dropdownMenu("home", "home1");
dropdownMenu("profile", "profile1");
dropdownMenu("resume", "resume1");
dropdownMenu("work", "work1");
dropdownMenu("adventures", "adventures1");

您可以通过以下方式简化js代码：

$('.toggle').each(function(){
    $(this).click(function () {
        $(this).toggleClass("selected");
        $(".secondMenu").hide();
        $(".toggle").removeClass("selected");
        $('#'+$(this).attr('id')+'1').toggle();
    });
});

这段代码使用html中的“toggle”类搜索每个元素。不需要重复所有这些

用小提琴编辑基本上你应该尽量减少你的代码。。
所以你可以试试这个

<div id="wrapper">
<div id="topBar">
    <ul id="mainMenu">
        <li class="toggle" id="home">Home</li>
        <li class="toggle" id="profile">Profile</li>
        <li class="toggle" id="resume">Resume</li>
        <li class="toggle" id="work">Work Examples</li>
        <li style="border:none" class="toggle" id="adventures">Adventures</li>
    </ul>
</div>
<div class="secondMenu home">
    <ul>
        <li>home</li>
        <li>home</li>
        <li>home</li>
        <li>home</li>
        <li>home</li>
        <li>home</li>
        <li style="border:none">home</li>
    </ul>
</div>
<div class="secondMenu profile">
    <ul>
        <li>prof</li>
        <li>prof</li>
        <li>prof</li>
        <li>prof</li>
        <li>prof</li>
        <li>prof</li>
        <li style="border:none">prof</li>
    </ul>
</div>
<div class="secondMenu resume">
    <ul>
        <li>res</li>
        <li>res</li>
        <li>res</li>
        <li>res</li>
        <li>res</li>
        <li>res</li>
        <li style="border:none">res</li>
    </ul>
</div>
<div class="secondMenu work">
    <ul>
        <li>egs</li>
        <li>egs</li>
        <li>egs</li>
        <li>egs</li>
        <li>egs</li>
        <li>egs</li>
        <li style="border:none">home</li>
    </ul>
</div>
<div class="secondMenu adventures">
    <ul>
        <li>adv</li>
        <li>adv</li>
        <li>adv</li>
        <li>adv</li>
        <li>adv</li>
        <li>adv</li>
        <li style="border:none">home</li>
    </ul>
</div>
<div id="clearDiv"></div>

所有其他解决方案都不正确，因为它不显示链接的活动状态。我的解决方案不显示活动状态：


$（函数（）{
$（'.toggle'）。单击（函数（）{
$（'.toggle'）.removeClass（'selected'）；
$（'.secondMenu'）.removeClass（'show'）；
变量$this=$（this），
$name=$（this.attr（'id'），
$name='#'+$name+'1'；
$this.addClass（'selected'）；
$（$name）.addClass（'show'）；
});
});
正文{
填充：0px；
边际：0px；
字体系列：“HelveticaNeue灯”，“Helvetica Neue灯”，“Helvetica Neue”，Helvetica，Arial，“Lucida Grande”，无衬线；
字体大小：300；
}
#顶栏{
边际：0px；
高度：50px；
宽度：100%；
背景色：#990000；
}
#主菜单{
利润率：25px0；
列表样式：无；
浮动：对；
}
#主菜单李{
浮动：左；
右边框：1px纯白；
填充：0 5px 0 5px；
颜色：白色；
}
.选定{
背景色：#3E0C0D；
边框：1px纯黑；
身高：100%；
}
.第二菜单{
位置：相对位置；
高度：30px；
宽度：100%；
背景色：#3E0C0D；
清楚:对,；
显示：无；
}
.secondMenu.show{
显示：块；
}
.第二菜单{
浮动：对；
利润率：8px0；
列表样式：无；
}
李先生{
浮动：左；
右边框：1px纯白；
填充：0 5px 0 5px；
颜色：白色；
字号：80%；
}
#clearDiv{
明确：两者皆有；
边际：0px；
填充：0px；
}


主页
配置文件
继续
工作示例
冒险


家
家
家
家
家
家
主页


专业的
$(".toggle").click(function () {
    $(".secondMenu").hide();
    $("."+$(this).attr("id")).show();
    $(".toggle").removeClass("selected");
    $(this).addClass("selected");
});

$(".toggle").click(function () {
    $(this).toggleClass("selected");
    $(".secondMenu").hide();
    $(".toggle").removeClass("selected");
    $("#"+this.dataset.id+"1").toggle();
});