Question

这是我的第一个问题，在我自己找到答案之前，我很少寻求帮助，但这个让我真实。

我有以下内容：

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

当我点击带有菜单打开类的标签时，它实际上显示了nav标签（意思是，我猜，toggleClass正在工作），但之后我用菜单关闭类命中了一个标签，并且没有执行切换

此问题发生在IE和FF上，但不是CH

我正在使用CH 52，IE 11和FF 46。

我已经尝试过了：

将jQuery版本从1.x更改为3.x
使用e.stopPropagation（）函数并将处理重定向到html

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

提前致谢！

Answer 1

按钮元素不应该包含锚点。

检查一下：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

toggleClass只在第一次点击时工作（IE，FF）

1 个答案: