Question

我有一个下拉菜单，我想知道如何保持列表项折叠，直到单击导航按钮？我尝试过滑动/滑动，但我无法让它工作。

非常感谢任何进一步的见解。

感谢。

-------＆GT;

<script>
        $(function() {
            var pull        = $('button.open-menu');
                menu        = $('nav ul');
                menuHeight  = menu.height();

            $(pull).on('click', function(e) {
                e.preventDefault();
                menu.slideToggle();
            });

            $(window).resize(function(){
                var w = $(window).width();
                if(w > 320 && menu.is(':hidden')) {
                    menu.removeAttr('style');
                }
            });
        });
</script>

HTML

<!----------------------------MOBILE NAVIGATION MENU----------------------------------->
<div class="mobile-nav-container">
<button class="open-menu"><img src="images/menu-button.svg"></button>
<nav class="nav-menu">
<ul class="nav-menu">
<li class="mb-nav"><a href="current-journal.html">CURRENT JOURNAL</a></li>
<li class="mb-nav"><a href="subscribe.html">SUBSCRIBE</a></li>
<li class="mb-nav"><a href="submit.html">SUBMIT MATERIAL</a></li>
<li class="mb-nav"><a href="submission-guidelines.html">SUBMISSION GUIDELINES</a></li>
<li class="mb-nav"><a href="http://3elementsreview.blogspot.com">3E BLOG</a></li>
<li class="mb-nav"><a href="past-journals.html">PAST JOURNALS</a></li>
<li class="mb-nav"><a href="about-3elements.html">ABOUT 3ELEMENTS</a></li>
<li class="mb-nav"><a href="the-editors.html">THE EDITORS</a></li>
<li class="mb-nav"><a href="contact.html">CONTACT</a></li>
</ul>
</nav>
</div><!----------------------MOBILE NAV CONTAINER  END------------------------------->

CSS

.mobile-nav-container {
    position:relative;
    background-color:#252525;
    top:-5px;
    width:100%;
    height:40px;
    border-bottom:5px solid #ffd09d;
    z-index:300;
    display:inline-block;
}

ul.nav-menu {/*navigation menu as a whole*/
    position:relative;
    top:13px;
    margin:0px;
    padding:0px;
    background-color:#252525;
    width:100%;
    border-bottom: 2px solid #ff6000;
}

nav ul li a {/*navigation list items*/
    position:relative;
    top:0px;
    padding-left:5%;
    padding-right:5%;
    padding-top:3px;
    line-height:1.9em;
    border-bottom: 1px solid #313131;
    width:90%;
    height:30px;
    display:inline-block;
    font-family:myriad pro;
    font-size:1em;
    list-style:none;
    transition:300ms;
    -webkit-transition:300ms;
}

nav ul li {/*drop down list padding settings*/
    list-style:none;
}

nav li a {/*main navigation text color and padding settings*/
    position:relative;
    top:0px;
    margin:0px;
    padding:0px;
    color:#ffd09d;
    text-decoration:none;
}

.nav-menu li:active a {/*main navigation TEXT HOVER effects*/
    color:#ff6000;
    background-color:#beb29a;
    transition:400ms;
    -webkit-transition:400ms;
}

.nav-menu li:hover a {/*main navigation TEXT HOVER effects*/
    color:#ff6000;
    transition:300ms;
    -webkit-transition:300ms;
}

button.open-menu {
    position:relative;
    top:5px;
    left:5%;
    margin:0px;
    padding:0px;
    width:40px;
    height:29px;
    display:inline-block;
    outline:none;
    background-color:#353535;
    border:2px solid #424242;
    box-shadow:0px 0px 2px #000;
    cursor:pointer;
}

button.open-menu:active {
    cursor:pointer;
    border:2px solid #353535;
    box-shadow:none;
}

Answer 1

试试这个。 http://jsfiddle.net/4U8Wx/

    $(function () {
        var pull = $('button.open-menu');
        menu = $('nav ul');
        menuHeight = menu.height();
        menu.slideToggle(0);
        $(pull).on('click', function (e) {
            e.preventDefault();
            menu.slideToggle();
        });

        $(window).resize(function () {
            var w = $(window).width();
            if (w > 320 && menu.is(':hidden')) {
                menu.removeAttr('style');
            }
        });
    });

另外，你发了一些逗号+分号错误。

    var pull = $('button.open-menu');
    menu = $('nav ul');
    menuHeight = menu.height();

应该写成（如果不是，菜单和menuHeight将是全局变量）

    var pull = $('button.open-menu'),
    menu = $('nav ul'),
    menuHeight = menu.height(),

如何在点击事件之前隐藏菜单中的项目？

1 个答案: