使用jQuery使用同一按钮隐藏和显示菜单 [英] Hide and show menu with the same button using jquery

问题描述

我在使用jquery的某些下拉菜单中找到了一个教程.它工作正常，但我只想稍作调整.我不想使用悬停来隐藏菜单，而是希望具有与显示菜单相同的按钮，以便在再次按下菜单时将其隐藏.因此，同一按钮必须同时隐藏和显示下拉菜单. 我正在使用的脚本:

I have found a tutorial on some dropdown menu using jquery. It works fine but I want to adjust it just a little. Instead of hiding the menu using hovering, I want to have the same button that showed the menu, to hide it when it is being pressed again. So the same button has to both hide and show the dropdown menu. The script that im using:

    $(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/

Use jQuery's .toggle() http://api.jquery.com/toggle/

$("#yourbutton").click(function() {
    $("#yourmenu").toggle();
});

这篇关于使用jQuery使用同一按钮隐藏和显示菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！