为什么jquery只注册一次点击?

Why is jquery only registering a click once?

本文关键字：一次 jquery 注册 为什么      更新时间：2023-09-26

我知道这是一个愚蠢的简单问题，但它已经阻碍我太久了…

我想单击右上角的菜单图标(图片)，并在整个屏幕上显示一个透明的div菜单。然后当我再次点击图标时，我希望它消失。

JQuery应该在每次点击按钮时隐藏和显示一个div。它第一次显示div，但之后，它不注册点击。我在这个项目中使用了相当多的透明div，所以我的第一个猜测是，有一些东西加载，覆盖了按钮，这是阻止点击"到达"按钮的问题。但是我已经设置了一个z-index按钮，所以它出现在其他一切(也证实了背景颜色属性)，然而，当我第二次点击按钮，它应该隐藏的div停留在那里。

这是我的JQuery代码: 
$("#menuButton").click(function(){
    if($("#menuOverlay").hasClass("displayIt")){
        $("#menuOverlay").fadeOut(400);
    } else {
        $("#menuOverlay").fadeIn(400);
    }
});
这是我的HTML: 
<link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <div id="container">
        <header>
            <p class="homeLink">Company Name Here</p>
            <div id="menuButton"><img class="menuIcon" src="images/menuIcon.png"/></div>
        </header>
        <div class="slider">
            <div class="sliderPic"></div>
            <div class="sliderText"><p>This is come content just chilling right here.</p></div>
        </div>
    </div>
    <footer>
        <div id="arrowJumper"><img class="arrowIcon" src="images/greyArrow.png"/></div>
    </footer>
    <div id="menuOverlay" class="menuDiv">
        <ul id="menu">
            <li>Work.</li>
            <li>About.</li>
            <li>Careers.</li>
            <li>Ideas.</li>
            <li>News.</li>
            <li>Events.</li>
            <li>Contact.</li>
        </ul>
    </div>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="js/scripts.js"></script>
</body>

如果它是相关的，这是我的CSS: 

html, body {
    width: 100%;
    height: 100%;
}
body, html, .non-footer {
    height: 100%;
    min-height: 100%;
    width: 100%;
}
.footer {
    height: 55px;
    margin-top: -55px;
    width: 100%;
}
#arrowJumper {
    width: 100%;
    height: 55px;
    margin-top: -56px;
    background: rgba(0, 0, 0, 0);
    /*background-image: url('../images/greyArrow.png'); 
    background-position: center -15px;
    background-repeat: no-repeat;*/
    text-align: center;
    position: absolute;
}
header {
    position: absolute;
    width: 100%;
    z-index: 90;
}
footer {
    position: absolute;
    width: 100%;
    background: rgba(0, 0, 0, 0);
    z-index: 90;
}
.slider {
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 5;
    display: block;
    background: blue;
}
.homeLink {
    float: left;
    margin-left: 40px;
    margin-top: 50px;
    color: #ff6633;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 26px;
}
#menuButton {
    float: right;
    margin-right: 40px;
    margin-top: 50px;
}
#arrowJumper img{
-webkit-transition: all 500ms cubic-bezier(0.920, 0.065, 0.365, 0.570); 
   -moz-transition: all 500ms cubic-bezier(0.920, 0.065, 0.365, 0.570); 
     -o-transition: all 500ms cubic-bezier(0.920, 0.065, 0.365, 0.570); 
        transition: all 500ms cubic-bezier(0.920, 0.065, 0.365, 0.570); /* custom */
    margin-top: -15px;
}
#arrowJumper:hover {
    background-color: #ff6633;
    -webkit-transition: background-color 600ms linear;
       -moz-transition: background-color 600ms linear;
         -o-transition: background-color 600ms linear;
        -ms-transition: background-color 600ms linear;
            transition: background-color 600ms linear;
}
#arrowJumper:hover img {
    -webkit-transition: all 500ms cubic-bezier(0.920, 0.065, 0.365, 0.570); 
       -moz-transition: all 500ms cubic-bezier(0.920, 0.065, 0.365, 0.570); 
         -o-transition: all 500ms cubic-bezier(0.920, 0.065, 0.365, 0.570); 
            transition: all 500ms cubic-bezier(0.920, 0.065, 0.365, 0.570); /* custom */
    margin-top: 4px;
}
#container {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}
#menuOverlay {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
#menuOverlay {
    position: absolute;
    z-index: 10;
    display: none;
    background: rgb(200, 102, 51); /* The Fallback */
    background: rgba(200, 102, 51, 0.5);
    text-align: center;
    height: 960px;
}
#menuOverlay ul{
    vertical-align: center;
    position: absolute;
    top: 10%;
    transform: translateY(-50%);
    width: 100%;
    font-size: 56px;
    font-weight: normal;
    color: #fff;
}
#menuOverlay ul li{
    margin: 0;
    padding-top: 0.25em;
    padding-bottom: 0.25em;
}
#menuOverlay ul li:hover{
    color: #ff6633;
    background: #fff;
}
.displayIt {
    display: block;
}

这里有一个方便的小提琴:http://jsfiddle.net/yv9mr/我对这一切都很陌生，所以我真的很感谢你的帮助。我肯定是很简单的。感谢所有!

你需要在if-else块中像这样的每次点击时添加/删除类

 if($("#menuOverlay").hasClass("displayIt")){
        $("#menuOverlay").fadeOut(400);
            $("#menuOverlay").removeClass("displayIt"); //remove class
    } else {
        $("#menuOverlay").fadeIn(400);
        $("#menuOverlay").addClass("displayIt"); //add  class
    }

但最简单的方法是fadeToggle所需的div，以隐藏/显示:

$("#menuOverlay").fadeToggle();

我建议您使用jquery的.fadeToggle()方法。在我看来，让jQuery来管理切换效果更干净:

$("#menuButton").click(function(){
    $("#menuOverlay").fadeToggle(400);
});

已测试，并与您的示例一起工作:JSFiddle.

试试这个:

var clicked = false;
$("#menuButton").click(function(){
if (clicked == true){
    $("#menuOverlay").fadeOut(400);
    clicked = false;
} else {
    $("#menuOverlay").fadeIn(400);
    clicked = true;
}
});

问题是您没有添加或删除类。事件侦听器工作正常，但是您应该添加

$("#menuOverlay").toggleClass("displayIt");

到javascript的末尾(在if/else之后)。

像"expanded"这样的类更符合语义。

原因函数再次被调用，但您的条件if($("#menuOverlay").hasClass("displayIt"))始终为真，因此其他永远不会执行。你可以做

$("#menuButton").click(function(){    
    if($("#menuOverlay").hasClass("displayIt")){
        $("#menuOverlay").removeClass("displayIt");
        $("#menuOverlay").fadeOut(400);
    } else {
    $("#menuOverlay").addClass("displayIt");
        $("#menuOverlay").fadeIn(400);
    }
});

小提琴

或

var shown=false;
$("#menuButton").click(function(){    
if(!shown)
{
    $("#menuOverlay").fadeOut(400);
    shown =true;
}
else
{
    $("#menuOverlay").fadeIn(400);
    shown=false;
}
});
相关文章：