如何保持显示:块;在媒体查询之间工作

How to keep display: block; working inbetween media queries

本文关键字：媒体 查询 之间 工作 何保持 显示      更新时间：2023-09-26

我有一个菜单按钮，当你在960px下点击它时，它会切换菜单。这个菜单被永久显示在一个超过960像素的屏幕上。问题是，当我点击菜单打开，然后在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>

您也可以使用CSS媒体查询来完成此操作

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