Question

HTML

<div id="navBar">
    <div class="navBarStyles">
        <ul class="mainNavBar">
            <li><div class="menu-icon">z</div>
                <ul>
                    <li><a href="#">WORKS</a></li>
                    <li><a href="#">ARTICLES</a></li>
                    <li><a href="#">EXTRA</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>

CSS

@media only screen
    and (max-width : 500px) {

        #navBar .mainNavBar li ul{
            position: absolute;
            display: block;
            width: 100%;
            background-color: #FFFFFF;
            text-align: center;
        }
        #navBar .mainNavBar li ul a{
            color: #666666;
            display: block;
            text-align: center;
            width: 50px;
        }
        .mainNavBar{
            width: 500px;
        }
        #navBar .mainNavBar li ul{
            display: none;  /*hide*/
        }
    }

.menu-icon:hover{
    cursor: pointer;
    opacity: 1;
}

jquery的

$(function() {                       
  $(".menu-icon").click(function() {  
    $("#navBar .mainNavBar li ul").toggle();     
  });
});

if($(window).width() > 500){
$(".mainNavBar").show();

}

jsFiddle

changed condition - still not working

以上代码运行正常，唯一的问题是宽度小于500并且用户点击z按钮显示菜单，然后再次点击返回隐藏它，窗口被重新调整为大于500按钮不显示的大小。请帮忙。需要在jquery代码中修复if语句。

Answer 1

您可以使用其他媒体查询来执行此操作。

<强> Working Demo

CSS

@media only screen and (min-width : 500px) {
 #navBar .mainNavBar li ul {
   display: block!important;
 }    
}

我给出!important的原因是jquery是添加内联CSS来显示和隐藏。所以我们需要这个来覆盖。

如果您不想使用!importnat，那么您可以尝试toggleClass

Answer 2

这里你通过了以下条件

if($(window).width() > 500){
    $("#navBar .mainNavBar li ul").show();
}

这意味着当窗口宽度超过500时，显示子菜单的时间，否则它不显示。所以你必须改变这种状况。像

   if($(window).width() > 200){
        $("#navBar .mainNavBar li ul").show();
   }

或改变Css。

#navBar .mainNavBar li ul{
     display: none;  /*hide*/
 }

此处删除display none。

#navBar .mainNavBar li ul{
         display: block;  /*hide*/
}

当窗口宽度大于特定值时显示内容 - jquery

2 个答案: