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

Posted 2023-03-06

【中文标题】响应式下拉菜单 - 当屏幕大小增加到断点时隐藏以前显示的菜单项

【英文标题】：Responsive dropdown menu - hide previously displayed menu items when screen size increased to breakpoint

【发布时间】：2013-08-03 00:26:32

【问题描述】：

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

<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 新手，我很困惑。任何帮助将不胜感激。谢谢！

【参考方案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;

【讨论】：

谢谢谢谢谢谢！这很好用！现在跨浏览器和设备进行测试...