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

首先点击打开菜单工作正常，但第二个不起作用。我本人不是编码员，但我总是试图自己解决问题。我已经搜索了很多答案，但我甚至没有接近解决这个问题。您的帮助将是非常赞赏第二次点击菜单切换不起作用

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"; 
    }

谢谢

来源

2016-07-14 Francisco Couto

请问您可以添加一个jsfiddle/plunker/codepen链接吗？ –

@JossefHarush - 最好OP将插入一个片段到问题中，而不是提供一个外部站点链接。 – evolutionxbox

@evolutionxbox imho我最好的UX是在[jsfiddle/plunker/codepen]上看到它。 SO上的代码片段播放器并不富含它们提供的功能。我更喜欢他会把他的代码放在这里，并提供一个[jsfiddle/plunker/codepen]的链接，以便在行动中看到它。主要是因为他的情况有点复杂，没有看到它的想象 –

看来，在您的HTML菜单切换从来没有机会致电closebox函数。

我建议你使用一个单一的切换功能（如jQuery中的）来处理切换动作或一些CSS技巧。

如果您坚持使用一个打开的功能和一个关闭功能，您可以尝试addEventListener。

来源

2016-07-14 11:57:18

感谢您的帮助。我想维护代码。你能告诉我一个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（））' –

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

回答

相关问题