Question

当我在智能手机视图中切换菜单时，当调整大小到桌面视图时菜单保持隐藏状态时，我遇到了这个棘手的问题。

因此，当窗口达到约905px的宽度时，我想要移除切换的效果，并显示从隐藏到显示的导航。

我不知道如何解决这个问题，因为我不了解JQuery

这是我的代码

<div id="menu">
            <nav>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">About us</a></li>
                    <li class="remove-margin"><a href="#">Contact us</a></li>
                </ul>       
            </nav>
        </div>
<script type="text/javascript">
$(window).resize(function(){
    if ($(window).width() >= 905){  

    }   
})
$("#menu").addClass("responsive").before('<div id="three-lines"><i class="material-icons">menu</i></div>');
$("#three-lines").click(function(){
$("#menu").slideToggle('fast');
})
</script>

Answer 1

只要在达到条件时显示元素。

$(function() {



  $("#menu").addClass("responsive")
            .before('<div id="three-lines"><i class="material-icons">menu</i></div>');
 
  $("#three-lines").click(function() {
    $("#menu").slideToggle('fast');
  })


  addEventListener("resize", function() {
    if (innerWidth >= 905) {
      $("#menu").show();
    }
  })

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu">
  <nav>
    <ul>
      <li><a href="#">Home</a>
      </li>
      <li><a href="#">Services</a>
      </li>
      <li><a href="#">About us</a>
      </li>
      <li class="remove-margin"><a href="#">Contact us</a>
      </li>
    </ul>
  </nav>
</div>

<强>更新

使用媒体查询

@media screen and (min-width: 905px) {
    #menu{
        display: block;
    }
}

当窗口宽度达到一定大小时，如何删除slidetoggle隐藏div

1 个答案: