窗口调整大小时导航栏不会切换答案

【问题标题】：Navbar won't toggle when window resizes窗口调整大小时导航栏不会切换
【发布时间】：2016-02-08 09:52:27
【问题描述】：

我创建了一个贴在页面上的侧导航栏切换菜单。问题是当我调整窗口屏幕大小时，它不会切换，除非页面滚动到顶部。

HTML

  <i class="fa fa-bars fa-2x nav-toggle"></i>
  <nav class="main-navigation">
   <ul class='nav-links'>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#skills">Skills</a></li>
    <li><a href="#portfolio">Portfolio</a></li>
    <li><a href="#contact">Contact</a></li>
    </ul>
     </nav>

CSS

.main-navigation {
position: fixed;
top:0;
left:0;
width: 100px;
height: 100px;
text-align: center;
transform: translateY(-210%);
transition: transform 0.6s ease;
}

.main-navigation.open {
transform: translateY(50%);
}

$('.nav-toggle').on('click', function(){
    $('.main-navigation').toggleClass('open');
});

【问题讨论】：

请提供jsfiddle。
jsfiddle.net/7grquucm
您的.main-navigation 必须有position:fixed？
是的，因为我希望它可以通过网页访问。加上你给我的代码后我的切换没有打开。
问题是position:fixed。窗口较小时可以使用position:relative;。

标签： jquery html css toggle navbar

【解决方案1】：

这是您要查找的代码：

$(window).resize(function (){
if(window.width() < YOUR PREFERENCE) {

Insert your toggle code here

}
});

【讨论】：

切换菜单未打开

【解决方案2】：

HTML：

<i class="fa fa-bars fa-2x nav-toggle"></i>
  <nav class="open">
   <ul class='nav-links'>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#skills">Skills</a></li>
    <li><a href="#portfolio">Portfolio</a></li>
    <li><a href="#contact">Contact</a></li>
   </ul>
  </nav>

CSS：

.open {
position: fixed;
top:0;
left:0;
width: 100px;
height: 100px;
text-align: center;
transform: translateY(-210%);
transition: transform 0.6s ease;
}

.open.toggle {
transform: translateY(50%);
}

查询：

<script type="text/javascript">
var width = $(window).width();
if(width < 768){
   $(".nav-toggle").click(function(){
     $(".open").toggle();
     $(".open").toggleClass("toggle");
  });
}
</script>

【讨论】：