Question

$('span.nav-btn').click(function () {
        $('ul#menu').slideToggle();
    })  
$(window).resize(function () {
    if ( $(window).width() > 900) {
        $('ul#menu').removeAttr('style')
    }
});

$('span.sub-btn').click(function () {
        $('ul#sub').slideToggle();
        $(this).toggleClass('active'); return ('false');
    })

$(window).resize(function () {
    if ( $(window).width() > 900) {
        $('ul#sub').removeAttr('style')
    }
});

http://codepen.io/anon/pen/Hnhea

当浏览器宽度缩小到900px左右时，在“MENU”中产品＆amp;服务点击该脚本仍然有效但当鼠标移过另一个地方时，子菜单被隐藏并使其看起来像：悬停。

有人有解决方案如何使子菜单仍然显示，即使鼠标在其他地方???

谢谢。

Answer 1

您只需要为不同的视口分隔样式规则。

请参阅http://codepen.io/anon/pen/pFtuh

你显然必须整理它。

例如*：

#menu ul {
  /*opacity: 0;*/
  /*visibility: hidden;*/
  display: none;
}

#menu li:hover > ul {
  display: block;
  /*opacity: 1;*/
  /*visibility: visible;*/
}

@media screen and (max-width:900px) {
  #menu ul {
    position: relative;
    ...
  }
  #menu li:hover > ul {
     display: none;
  }
...

*唯一的变化。

当下拉列表位于移动视口中时，您不希望悬停。您还希望在移动视口中定位相对。

幻灯片切换菜单不会保持打开状态

1 个答案: