第二次点击菜单切换不起作用答案

【问题标题】：Second click on menu toggle doesn't work第二次点击菜单切换不起作用
【发布时间】：2016-07-14 10:49:42
【问题描述】：

第一次单击打开菜单可以正常工作，但第二次无法正常工作。我自己不是编码员，但我一直在尝试自己解决问题。我已经搜索了很多答案，但我什至还没有接近解决这个问题。非常感谢您的帮助

HTML

关于服务客户接触

<header id="masthead" class="site-header" role="banner" >
    <div style="width:33%"><i class="fa fa-bars menu-button" aria-hidden="true" onclick="openbox();" style="position:fixed;cursor:pointer;"></i></div>
    <div class="site-branding" style="width:33%">
        <img id="tempdcenterlogosmall" class=" " src="http://oneandother.london/wp-content/uploads/2016/07/logo-150x150.png" style="text-align:center; width:50px; <?php echo $tempdcenterlogosmall; ?> position:fixed;" />

Javascript

function openbox(){
        var d = document.getElementById("centralboxdiv");
        d.classList.remove("fadeOut");
        d.classList.remove("animated");
        d.className += " fadeIn animated";
        d.style.display = "flex";
        var d2 = document.getElementById("masthead"); 
        d2.style.display = "none";
        var d3 = document.getElementById("maincenterlogo"); 
        d3.style.display = "none";

        var d4 = document.getElementById("tempdcenterlogosmall");
        d4.classList.remove("fadeInUp");
        d4.classList.remove("animated");
        var d5 = document.getElementById("maincenterlogo");
        d5.classList.remove("fadeOutUp");
        d5.classList.remove("animated");
    }
    function closebox(){
        var d = document.getElementById("centralboxdiv");
        d.classList.remove("fadeIn");
        //d.classList.remove("animated");
        d.className += " fadeOut ";

        var d2 = document.getElementById("masthead"); 
        d2.style.display = "flex";
        var d3 = document.getElementById("maincenterlogo"); 
        d3.style.display = "flex";
        //d.style.display = "none";
    }

谢谢

【问题讨论】：

能否请您添加一个 jsfiddle / plunker / codepen 链接？
@JossefHarush - OP 最好在问题中插入一个 sn-p，而不是提供外部站点链接。
@evolutionxbox 恕我直言，我最好的用户体验是在 [jsfiddle / plunker / codepen] 上看到它。 SO 上的代码 sn-ps 播放器提供的功能并不丰富。我确实更喜欢他将他的代码放在这里并提供指向 [jsfiddle / plunker / codepen] 的链接，以便查看它的实际效果。主要是因为他的案子不看就想象的有点复杂

标签： javascript jquery html menu toggle

【解决方案1】：

在您的 HTML 中，菜单切换似乎永远没有机会调用 closebox 函数。

我建议您使用单个切换函数（如 jQuery 中的那个）来处理切换操作或一些 CSS 技巧。

如果你坚持使用一开一关，可以试试addEventListener。

【讨论】：

感谢您的帮助。我想保留代码。你能给我看一个 addEventListener 的例子吗？谢谢
1.定义回调帮助函数，我这里之所以使用帮助函数是为了给一个闭包来保存状态变量：var toggleCallback = function() { var open = true; return function () { if (open) {console.log('open'); } else {console.log('closed');} open = !open;}} 2. 给你想要点击的元素添加事件监听器：document.getElementById('youIdGoesHere').addEventListener('click', toggleCallback())