Question

我有一个菜单按钮，当你在960px下点击它时，它会切换一个菜单。该菜单永久显示在超过960px的屏幕上。问题是当我点击菜单打开，然后我关闭960px下的菜单，当我增加屏幕尺寸菜单不在那里因为最后一个动作是关闭菜单（当屏幕在960px。）无论菜单在960px以下的状态如何，我如何确保菜单保持在960px以上？

使用Javascript：

     $('.leftnavmenu').click(function (e) {
    e.preventDefault();
    if($(window).width() <= 960) {
        $('.left-nav-main-li.active div:nth-child(3)').slideToggle();
    } else { ($(window).width() >= 960) 
        $('left-nav ul.navigation>li>div').show();
    }
    });

HTML

   <div class="left-nav>
       <span class="leftnavmenu>Select</span>
       <div style="display: none;">
       <ul>...</ul>
   </div>

Answer 1

您也可以使用CSS媒体查询

执行此操作

//More than 960px
@media (min-width: 960px){
    .left-nav ul.navigation>li>div {
        display: block;
    }
}

如何保持显示：阻止;在媒体查询之间工作

1 个答案: