2

我为响应式网站创建了一个折叠菜单。

当在宽度小于 960 像素的浏览器中查看站点时，导航菜单项会被堆叠并隐藏。用户需要单击一个切换按钮来显示导航项。当浏览器宽度大于 960px 时，导航菜单项显示为一行。

我的问题发生在用户在 iPad 上浏览网站时。如果用户首先在 iPad 上以纵向模式（宽度 < 960 像素）打开站点并单击切换按钮以显示导航菜单，然后再次单击切换按钮以隐藏导航菜单。现在，如果用户将他的 iPad 旋转到横向模式（宽度 > 960 像素），导航菜单就会消失。

但是，如果用户在 iPad 上以纵向模式打开站点，然后将其旋转到横向模式而不单击切换按钮，则导航菜单在横向模式下可用。

以下是我编写的隐藏和显示导航菜单的 javascript 代码：

$(document).ready(function() {

    // Get the handlers
    var collapseBtn = $('#nav-collapse');
    var mainNav = $('#main-nav');

    // Navigation menus only collapse when they are not floated
    var isFloated = mainNav.children('li').css('float');
    if (isFloated != 'left') {
        // Add toggle button click event listener
        collapseBtn.on('click', function() {
            mainNav.slideToggle();
        });

    }

});

以下是html代码： 

<nav class="col-lg-12">
    <a class="nav-collapse" id="nav-collapse">Menu</a>
    <ul class="clearfix" id="main-nav">
        <li><a href="#">home</a></li>
        <li>
            <a href="#">Item 1</a>
            <ul>
                <li><a href="http://apple.com.au">Item 1</a></li>
                <li><a href="#"Item 1</a></li>
                <li><a href="#">Item 1</a></li>
                <li><a href="#">Item 1</a></li>
            </ul>
        </li>
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 1</a></li>
        <li>
            <a href="#">Item 1</a>
            <ul>
                <li><a href="#">Item 1</a></li>
                <li><a href="#">Item 1</a></li>
                <li><a href="#">Item 1</a></li>
                <li><a href="#">Item 1</a></li>
            </ul>
        </li>
        <li><a href="#">Item 1</a></li>
    </ul>
</nav>

下面是css代码：

/* toggle button */
#nav-collapse {
    display:block;
    margin:0 auto;
    padding:5px;
    background-color:#CDD1F4;
    text-align:center;
    width:20%;
    color:#ffffff;
    cursor:pointer;
}
#nav-collapse:hover {
    text-decoration:none;
}

/* main navigation */
ul#main-nav {
    list-style:none;
    padding-left:0;
    display:none;
}
ul#main-nav li {
    z-index:9;
}
ul#main-nav  li a {
    display:block;
    padding-top:5px;
    padding-bottom:5px;
    padding-left:5px;
    border-bottom:1px solid #cccccc;
}
ul#main-nav  li a:hover {
    text-decoration:none;
    background-color:#CDD1F4;
    color:#ffffff;
}

/* first level navigation */


/* second level navigation */
ul#main-nav > li > ul {
    display:none;
    list-style:none;
    padding-left:2%;
}

@media (min-width: 960px) {

    /* toggle button */
    #nav-collapse {
        display:none;
    }

    /* main navigation */
    ul#main-nav, ul#main-nav ul, ul#main-nav ul li {
        margin:0;
        padding:0;
    }
    ul#main-nav {
        line-height:1;
        list-style:none;
        display:block;
        overflow:visible;
    }
    ul#main-nav li a {
        font-size:13px;
        color:#6D87C3;
        display:block;
        text-decoration:none;
        font-family: 'pt sans',Arial,Helvetica,sans-serif;
    }
    ul#main-nav  li a:hover {
    text-decoration:none;
    background-color:transparent;
    color:#6D87C3;
}

    /* first level navigation */
    ul#main-nav > li {
        float:left;
        padding:0;
        margin:0;
        position:relative;
    }
    ul#main-nav > li > a {
        line-height:10px;
        padding:0px 12px 0px 7px;
        border-right:1px solid #6D87C3;
        border-bottom:none;
    }
    ul#main-nav > li:hover > ul {
        display:block;
    }

    /* second level navigation */
    ul#main-nav > li > ul {
        display:none;
        position:absolute;
    }
    ul#main-nav > li > ul > li {
        background-image:url('../img/trans3.png');
    }
    ul#main-nav > li > ul > li > a {
        width:220px;
        padding:15px 10px;
    }
    ul#main-nav > li > ul > li > a:hover {
        color:#ffffff;
    }

}
4

1 回答 1

1

问题是 jQuery 的.slideToggle()方法会动态地将 a 添加style: none到您正在切换的元素中，直接添加到标签中。因此，它优先于 CSS 中设置的媒体查询规则。要解决此问题，请在屏幕宽度超过 960 像素的媒体查询定位设备中!important，display为#main-nav.

ul#main-nav {
    line-height:1;
    list-style:none;
    display:block !important;
    overflow:visible;
}

我注意到的另一件事是您在导航切换上为单击事件添加侦听器的决定因素。如果它依赖于#main-nav的 float 属性，那么当页面第一次以横向加载然后切换到纵向时，滑动切换将不起作用，因为#nav-collapse在加载时没有将侦听器附加到元素。不过，类似以下方法的方法应该可以解决这个问题：

$(document).ready(function () {

    // Get the handlers
    var collapseBtn = $('#nav-collapse');

    collapseBtn.on('click', function () {
        //if the device is desktop prevent toggle of nav
        if (screen.width >= 960) 
            return;
        mainNav.slideToggle();
    });

});
于 2013-08-26T19:44:01.630 回答