Question

我有一个问题，我想用这个很酷的动画Burger-Menu-Button（“navicon1”）编写Side bar。菜单按钮的炫酷动画效果用于“开放”类。如果单击菜单按钮，我也想切换“openNav”和“closeNav”功能。

所以这就是我想要的：

如果我点击菜单按钮（navicon1）第一次 - >菜单按钮更改为X（这可行）并执行javascript函数“openNav”
如果我点击菜单按钮（navicon1）第二次 - >菜单按钮更改为正常（这有效）并执行javascript函数 “closeNav”

这是我的代码：

  $(document).ready(function() {

        $('#navicon1,#navicon2,#navicon3,#navicon4').click(function() {
            $(this).toggleClass('open');

        });
    });
    /* Set the width of the side navigation to 250px and the left margin of the page content to 250px and add a black background color to body */
    function openNav() {

        document.getElementById("mySidenav").style.width = "75%";
        document.getElementById("main").style.marginLeft = "75%";
        document.body.style.backgroundColor = "rgba(0,0,0,0.4)";

        }

        /* Set the width of the side navigation to 0 and the left margin of the page content to 0, and the background color of body to white */
    function closeNav() {

        document.getElementById("mySidenav").style.width = "0";
        document.getElementById("main").style.marginLeft = "0";
        document.body.style.backgroundColor = "white";
        check = 0;
        }

你可以忽略navicon2-3，它们只适用于css ......

感谢您的帮助：）

Answer 1

使用变量记住状态：

var navOpen = false;
$("#navicon1").click(function() {
    if (navOpen) {
        closeNav();
        navOpen = false;
    } else {
        openNav();
        navOpen = true;
    }
});

Answer 2

我建议创建一个处理toggleClass()的函数，并根据状态从那里调用其他函数。

$('#navicon1').click(function() {
    $(this).toggleClass('open');

    //if hasClass() then call function to open it

    //else call function to close it

});

Javascript：使用1个Click-Listener在2个函数之间切换

2 个答案: