Question

我正在创建自适应导航，并在调整大小时遇到问题。

这是一个简化的代码集来说明问题... http://codepen.io/anon/pen/xbEwmJ

当您在宽视口（桌面视图）上开始然后调整大小时，您会注意到当您点击汉堡包图标时，菜单向下滑动然后再次直接向上滑动。这不是我所追求的行为，菜单应该只在再次点击图标时向上滑动。

当您在移动视图上刷新页面然后加宽浏览器窗口时，它可以正常工作，因此不确定为什么它不能以其他方式工作。

我觉得这与我的if：visible语句有关吗？

这是我的代码......

HTML

<header class="site-header cfix">
  <div class="wrap">
<nav class="cfix">
  <a class="toggleMenu" href="#">
    <span class="menuIcon" aria-hidden="true"></span>
        <span class="menuText">Menu</span>
  </a>
     <ul class="nav-pri nav1">
    <li><a class="js-toplink" href="#">Personal</a></li>
         <li><a class="js-toplink" href="#">Business</a></li>
     </ul>
     <ul class="nav-sec nav1">
       <li><a href="#">About</a></li>
         <li><a href="#">Claims</a></li>
         <li><a href="#">Contact</a></li>
     </ul>
</nav>
 </div>
</header>

的Javascript

$(function(){

function checksize() {
  if ($(window).width() < 720) {
    $(".toggleMenu").click(function(){
        if ($(".nav1").is(':visible')) {
            $(".nav1").slideUp();
        } else {
            $(".nav1").slideDown();
        }
    });

} else {        
  $(".nav1").slideDown();   
}
}

checksize();

$(window).resize(checksize);

});

Answer 1

你在一个函数中绑定了.toggleMenu上的click事件，所以每次运行这个函数时，比如on on resize，它会再次绑定click事件，这会导致问题。

$(function(){
    $(".toggleMenu").click(function(){
        if ($(".nav1").is(':visible')) {
            $(".nav1").slideUp();
        } else {
            $(".nav1").slideDown();
        }
    });

    function checksize() {
        if ($(window).width() > 720) {
            $(".nav1").slideDown();
        }

        else{
            $(".nav1").hide(); // remove else condition if you want to show opend menu on shorter screen once clicked
        }
    }

    checksize();
    $(window).resize(checksize);
});

jQuery调整大小的问题，如果：可见。

1 个答案: