Question

我创建了一个响应式菜单，当我按下打开的菜单时可以打开和协作。但问题是，当我调整屏幕大小时，它会在达到680像素或更低时自动打开，如果我在移动尺寸时折叠菜单并尝试再次将其调整到桌面（超过680像素），菜单将保持隐藏状态

html代码

<a href="#" id="pull"><img src="assets/img/nav-icon.png" alt="Menu"></a>
<div class="bar">
    <div class="lang">
        <a href="#"><div class="langDK"></div></a>
        <a href="#"><div class="langUK"></div></a>
    </div>
    <ul class="navigation">
        <a href="#"><img src="assets/img/logo.png" alt=""></a>
        <li class="item"><a href="#">Home</a></li>
        <li class="item"><a href="#">Products</a></li>
        <li class="item"><a href="#">Work</a></li>
        <li class="item"><a href="#">About</a></li>
        <li class="item"><a href="#">Contact</a></li>
    </ul>
</div>

jquery的

$(function(){
    var pull        = $('#pull');
        menu        = $('.bar .item');
        w = $(window).width();

        if(w > 680 ) {
            menu.show()
        }

        if(w < 680){
            menu.hide();
        }

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

我也有一些CSS和媒体查询，但不认为问题就在那里。

Answer 1

为窗口调整大小设置事件监听器：

$(window).on('resize', function(){
    var menu = $('.bar .item');
    var w = $(window).width();
    if(w >= 680 ) {
        menu.show()
    }else{
        menu.hide();
    }
})

如果您希望默认隐藏li项，请按以下方式添加CSS类：

li.item {display:none;}

Answer 2

尝试这个

$(function() {
        var pull = $('#pull');
        menu = $('.navigation .dropdown');
        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');
                }
        });
});

HTML

 <div class="navigation">
                        <a href="#" id="pull"></a>
                        <ul class="nav pull-right group dropdown">
                            <li class="nav-line-image"></li>
                                <li><a href="#">Home</a></li>
                                    <li><a href="#">About Us</a></li>
                                        <li><a href="gallery-page.html">Design Gallery</a></li>
                                            <li><a href="#">Designer Collection</a></li>
                                            <li><a href="inner-page.html">Silver Collection</a></li>
                                        <li><a href="#">Promotion/Events</a></li>
                                    <li class="active"><a href="branch-page.html">Branch Details</a></li>
                                <li><a href="contact-page.html">Contact Us</a></li>
                            <li class="nav-line-image"></li>
                        </ul>
                    </div><!--navigation end-->

css for mobile和tabs

.nav{
            display : none;
            position: relative;
        }

        #pull {
            position: absolute;
            display : block;
            width   : 17px;
            height  : 20px;
            color   : #5a504c;
            margin  : 15px 0 0 20px;
            background      : #ccc;
            text-decoration :none;
        }

自动折叠jquery菜单取决于屏幕大小

2 个答案: