响应下拉菜单-当屏幕大小增加到断点时隐藏先前显示的菜单项

Question

我正在设计一个响应性下拉菜单，其标记类似于以下内容：

<nav id="nav" role="navigation"> 
  <a href="#nav">Show navigation</a>
  <a href="#">Hide navigation</a>
  <ul>
    <li><a href="/landingpage.html">anchor link 1</a>
        <div class="show-hide">
            <div class="show">►</div>
            <div class="hide">▼</div>
        </div>
        <ul class="submenu">
            <li>list item</li>
            <li>list item</li>
            <li>list item</li>
        </ul>
    </li>
   etc...
  </ul>
</nav>

锚链接也是指向登陆页面的超链接。在大屏幕上，导航是水平的，我使用CSS将子菜单显示在悬停状态下，这样锚点链接仍然可以点击。

控制悬停的CSS：

#nav ul > li > .submenu {
display: none;
}

@media only screen and (min-width: 768px){
  #nav li:hover > .submenu {
    display:block;
  }
}

在小屏幕上，导航折叠到显示锚链接的垂直导航菜单栏，以及锚链接右侧的箭头。单击这些箭头时显示子菜单(使用jQuery slideToggle)。锚链接本身仍然指向他们的登陆页面，虽然悬停在他们上面不再显示子菜单。

在单击时控制slideToggle()的slideToggle：

$(".show-hide").click(function() {
  $(this).next('ul').slideToggle();
  $('div',this).toggle();
});  

http://jsfiddle.net/NxDe8/3/ 对菜单当前迭代的操纵

，当用户与菜单的小屏幕垂直版本交互，然后调整屏幕大小以触发大屏幕水平版本的菜单时，就会出现问题。

从一个小屏幕开始，用户单击箭头以显示子菜单。然后用户调整窗口大小，以便显示大屏幕水平导航条.悬停仍然有效，但子菜单仍然可见。如果用户在扩大窗口以触发大屏幕水平菜单之前关闭小屏幕上的子菜单，则子菜单将保持隐藏状态，但悬停将不再用于显示子菜单。

我尝试使用jQuery代替CSS来控制悬停，将悬停函数绑定到屏幕大小，并在窗口大小增加时自动隐藏子菜单。经过几次调整和单击后，这一点就会中断：http://jsfiddle.net/ps3Tq/4/

我还尝试将slideToggle()函数绑定到小窗口大小，但在本例中，子菜单只是上下跳，没有解决任何问题。

我是jQuery的新手，我很困惑。任何帮助都将不胜感激。谢谢!

Answer 1

试试看：

http://jsfiddle.net/NxDe8/4/

基本上，我只是让一切使用jQuery，而不是混合。

联署材料：

$('#nav li').on('mouseenter', function() {
    if ($(window).width() > 768) {
        $(this).find('.submenu').stop().slideDown();
    }
});

$('#nav li').on('mouseleave', function() {
    if ($(window).width() > 768) {
        $(this).find('.submenu').stop().slideUp();
    }
});

$(window).on('resize', function() {
    if ($(window).width() > 768) {
        $('.submenu, .hide').hide();
        $('.show').show();

    }
});

CSS：

/* second level */

 #nav ul li .submenu {
    display: none;
    position: absolute;
}