3

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

<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">►&lt;/div>
            <div class="hide">▼&lt;/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() 的 jQuery：

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

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

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

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

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

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

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

4

1 回答 1

2

试一试：

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

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

JS：

$('#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;
}
于 2013-08-01T22:26:23.787 回答