Question

我的移动导航遇到了一些问题。

首先，下拉菜单不会响应第一次点击，但会在第二次点击后开始响应，然后每次点击都会响应。

其次，当我将浏览器缩放回桌面版时，导航将消失。

以下是我在Codepen中设置代码的方式：http://bit.ly/1Bxskho

HTML

<nav id="main-nav">
     <a id="mobile-btn">Mobile Menus</a>
     <ul>
       <li><a href="index.html" target="_self" class="visited">Home</a></li>
       <li><a href="architectures.html" target="_self">Architectures</a></li>
       <li><a href="nature_phenomenons.html" target="_self">Nature's Phenomenons</a></li>
     </ul>
 </nav>

CSS

#main-nav{
    float: right;
}

#mobile-btn{
    display: none;
    text-indent: 0;
    margin: 20px;
    background: url(../images/sprite.png) no-repeat -25px 0;
}

#main-nav ul{
    margin: 25px 0 0 0;
}

#main-nav ul li{
    display: inline-block;
    padding-left: 20px;
}

#main-nav ul li a{
    display: block;
    color: #29abe1;
    font-family: 'Muli', san-serif;
    font-weight: 300;
    font-size: 1.1em;
}

#main-nav ul li a:hover, #main-nav ul li a.visited{
    color: #21b573;
}

@media screen and (max-width: 780px) {

    /* #main-nav & #mobile-btn */
    #mobile-btn{
        display: block;
        background: url(../images/sprite@2x.png) no-repeat -25px 0;
        background-size: 200px 200px;
        width: 30px;
        height: 20px;
    }

    #main-nav:hover #mobile-btn, #mobile-btn:hover{
        cursor: pointer;
    }

    #main-nav ul, #main-nav ul li, #main-nav ul li a{
        width: 100%;
    }

    #main-nav ul{
        background-color: #fff;
        position: absolute;
        top: 60px;
        left: 0;
        margin: 0;
        display: none;
        -webkit-box-shadow: 0 2px 3px #21b573;
        -moz-box-shadow: 0 2px 3px #21b573;
        -ms-box-shadow: 0 2px 3px #21b573;
        -o-box-shadow: 0 2px 3px #21b573;
        box-shadow: 0 2px 3px #21b573;
    }

    #main-nav ul li{
        padding: 0;
        border-top: 1px solid #21b573;
    }

    #main-nav ul li a{
        text-align: center;
        padding: 20px 0;
    }
}

的Javascript

$('#mobile-btn').toggle(function(e){
        e.preventDefault();
        $(this).click(function(){
            $('#main-nav ul').stop().slideDown();
            $('#main-nav').css({"background-color": "#21b573"});
            $('#mobile-btn').css({"background-position": "-65px 0"});
        })
    }, function(){
        $(this).click(function(){
            $('#main-nav ul').stop().slideUp();
            $('#main-nav').css({"background-color": "#fff"});
            $('#mobile-btn').css({"background-position": "-25px 0"});
        })
    });

Answer 1

尝试this codepen

您使用的toggle函数已从1.8推荐并从1.9中删除（还有另一种方法具有相同名称，但功能不同）

$(document).ready(function() {
    var open = false;
    function sliding(){
        if(open){
            $('#main-nav ul').stop().slideDown();
            $('#main-nav').css({"background-color": "#21b573"});
            $('#mobile-btn').css({"background-position": "-65px 0"});
        }
        else{
            $('#main-nav ul').stop().slideUp();
            $('#main-nav').css({"background-color": "#fff"});
            $('#mobile-btn').css({"background-position": "-25px 0"});
        }
        open = !open;
    }

    $('#mobile-btn').click(function(){
        sliding();
    })
}); //end ready

Answer 2

创建元素时，该元素应用了CSS属性。这些属性可以通过：

从父母继承
指定类的应用
来自元素的style属性的显式设置

当您查询元素的样式属性时，您获得的是通过先前的样式应用程序显式设置的内容，并且与通过其他机制对元素生效的CSS属性无关。

当您更改CSS时，您正在访问其样式属性。第一次点击初始化style，第二次点击更改它。

要解决此问题，请将您要更改的属性放在另一个类规则中，然后使用jQuery的toggleClass()方法添加和删除该类。

为什么按钮在第一次单击时没有响应，以及为什么菜单在缩放到桌面时会消失

2 个答案: