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（）的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的新手，我很难过。任何帮助将不胜感激。谢谢！

Answer 1

放手一搏：

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

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

1 个答案: