我找到了一个关于使用 jquery 的下拉菜单的教程。它工作正常,但我想稍微调整一下。我不想使用悬停隐藏菜单,而是想要显示菜单的相同按钮,以便在再次按下时隐藏它。所以同一个按钮必须同时隐藏和显示下拉菜单。 我使用的脚本:
$(document).ready(function () {
$("ul.subnav").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled - Adds empty span tag after ul.subnav
$("ul.topnav li span").click(function () { //When trigger is clicked...
//Following events are applied to the subnav itself (moving subnav up and down)
$(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click
$(this).parent().hover(function () {
}, function () {
$(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
});
//Following events are applied to the trigger (Hover events for the trigger)
}).hover(function () {
$(this).addClass("subhover"); //On hover over, add class "subhover"
}, function () { //On Hover Out
$(this).removeClass("subhover"); //On hover out, remove class "subhover"
});
});
最佳答案
使用 jQuery 的 .toggle()
http://api.jquery.com/toggle/
$("#yourbutton").click(function() {
$("#yourmenu").toggle();
});
关于javascript - 使用 jquery 隐藏和显示具有相同按钮的菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11992535/