javascript - jQuery，slicknav 插件，长菜单溢出 y

Question

我在手机菜单中使用 slicknav 插件，但遇到以下问题: 菜单必须固定在顶部，但我的菜单相当长，对于较小的屏幕，不可能浏览所有元素。 我尝试将移动触发器(定位固定)和菜单本身相对分离，但这不起作用，以及在滚动上添加 overflow-y 并为菜单包装器本身添加 auto。 任何人都可以帮助我提供某种解决方案或遇到过与此插件类似的问题吗？ HTML:

<ul id="menu2">
    <li>Parent 1
        <ul>
            <li><a href="#">item 3</a></li>
            <li>Parent 3
                <ul>
                    <li><a href="#">item 8</a></li>
                    <li><a href="#">item 9</a></li>
                    <li><a href="#">item 10</a></li>
                </ul>
            </li>
            <li><a href="#">item 4</a></li>
        </ul>
    </li>
    <li><a href="#">item 1</a></li>
    <li>non-link item</li>
    <li>Parent 2
        <ul>
            <li><a href="#">item 5</a></li>
            <li><a href="#">item 6</a></li>
            <li><a href="#">item 7</a></li>
        </ul>
    </li>
</ul>

js:

$('#menu2').slicknav({prependTo:'#mobileMenuHolder'});

CSS:(不工作)

#mobileMenuHolder, .slicknav_menu{
  overflow-y: scroll;
  position: relative;
}

mobileMenuHolder 保存菜单，位于固定 div 的底部。

感谢您提供的所有帮助。

jsfiddle

Answer 1

我知道这个问题发布已经很久了，但我遇到了同样的问题，所以我会在这里发布我的解决方案。当您初始化 slicknav 菜单时，您应该添加相应的回调以将某个类切换到处于打开状态的容器，最好是在 body 上。这样，如果您有可能设置打开状态的样式并添加一点 css 以使其在小高度屏幕上隐藏滚动条。

以下是您如何初始化 slicknav:

var $container = $('body'); $('#menu2').slicknav({ duplicate:false, //adjust if you have an un-responsive menu to begin with label: 'Menu', beforeOpen: function(e) {<br/> if(e.hasClass('slicknav_btn')){ $container.addClass('slicknav_open'); } }, beforeClose: function(e) { if(e.hasClass('slicknav_btn')){ $container.removeClass('slicknav_open'); } } });

然后是 css(将其放入您的@media 查询中):

html,body{
    height:100%;
    margin:0
}

.slicknav_open .slicknav_menu {
    height: 100%;
    overflow-y: scroll;
    width: calc(100% + 22px);
    margin-right: -22px;
    position:fixed;
    top:0;
    left:0;

}
#menu2{
 height: auto;   
}

这是演示用的 fiddle :http://jsfiddle.net/9vvanrj2/