Question

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

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%);
}

JS

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

Answer 1

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%);
}

JQUERY：

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

Answer 2

这是您正在寻找的代码：

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

Insert your toggle code here

}
});

当窗口调整大小时，Navbar不会切换

2 个答案: