toggleClass仅在第一次点击时才起作用（IE，FF）

这是我的第一个问题，在我自己找到答案之前，我很少要求帮助，但是这一个让我真实。toggleClass仅在第一次点击时才起作用（IE，FF）

我有以下几点：

HTML

<!-- This one opens/shows the nav. I should change div to a button tag --> 
<div class="menu"><a id="menu-open" class="menu-open" href="#">&#9776;</a></div> 
<nav id="navigation" class="navigation"> 
    <!-- This on closes/hide the nav --> 
    <button type="button" value="Close" class="button-close"> 
     <a id="menu-close" class="menu-close">X</a> 
    </button> 
    <h1>User Name</h1> 
    <p class="mail"><sec:authentication property="principal.username" /></p> 
</nav>

CSS

.navigation { 
     position: fixed; 
     background: #fff; 
     width: 100%; 
     height: 100vh; 
     top: 0; 
     z-index: -100; 
     display: none; 
     text-align: center; 
     font-weight: bold; 
} 

.navigation-open { 
     z-index: 100; 
     display: inherit; 
}

jQuery的

$(document).ready(function(){ 

    $(".menu-open").click(function(){ 
     $(".navigation").toggleClass("navigation-open")     
    }); 
    $(".menu-close").click(function(){ 
     $(".navigation").toggleClass("navigation-open") 
    }); 
});

当我打了一个标签与菜单式公开课，它实际上显示导航标签（m我想，toggleClass正在工作），但之后我用菜单关闭类打了一个标签，并且没有切换执行。

这个问题发生在IE和FF，但不是CH

我使用CH 52，IE 11和FF 46

我已经尝试过：

更改的jQuery版本从1.x中到3.x
使用e.stopPropagation（）函数和重定向处理的HTML

我会很感激这方面的任何帮助，因为它会让我疯狂。

在此先感谢！

来源

2016-08-11 markite

为什么你有一个按钮的内部锚？处理程序绑定到锚，但大概是它被点击的按钮？（除非你真的点击X） – billyonecan

嗯，我真的没有想到为什么在按钮中有一个锚点，可能该按钮是一个div，锚点仍然存在。现在你指出这很糟糕。然而。锚点和按钮的大小相同，都像定义的“可点击”元素，但是，我应该改变它。感谢您的高举。 – markite

你真的是对的，是谁是处理者。我正在做一些可点击元素的“初始”。 – markite

按钮元素不应该在它们内部有一个锚点。

检查：

$(document).ready(function(){ 
 

 
    $(".menu-open").click(function(){ 
 
     $(".navigation").toggleClass("navigation-open")     
 
    }); 
 
    $(".menu-close").click(function(){ 
 
     $(".navigation").toggleClass("navigation-open") 
 
    }); 
 
});

.navigation { 
 
     position: fixed; 
 
     background: #fff; 
 
     width: 100%; 
 
     height: 100vh; 
 
     top: 0; 
 
     z-index: -100; 
 
     display: none; 
 
     text-align: center; 
 
     font-weight: bold; 
 
} 
 

 
.navigation-open { 
 
     z-index: 100; 
 
     display: inherit; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- This one opens/shows the nav. I should change div to a button tag --> 
 
<div class="menu"><a id="menu-open" class="menu-open" href="#">&#9776;</a></div> 
 
<nav id="navigation" class="navigation"> 
 
    <!-- This on closes/hide the nav --> 
 
    <button type="button" value="Close" class="button-close menu-close"> 
 
     X 
 
    </button> 
 
    <h1>User Name</h1> 
 
    <p class="mail"><sec:authentication property="principal.username" /></p> 
 
</nav>

来源

2016-08-11 14:13:55 Dekel

现在它工作，但为什么？这是因为我错过了将正确处理分配给正确元素的要点？因为我只是抹去了主播和voilá，它的工作原理！ P.D .:我简直不敢相信。该死的 – markite

问题是因为你在'button'里面有'a' - 只有'a'上的点击**正好触发了'click'事件（并且没有点击按钮）。 – Dekel

@markite，也将欣赏我的答案:) – Dekel

toggleClass仅在第一次点击时才起作用（IE，FF）

回答

相关问题