Question

我有一个包含20多个项目的bootstrap navigation菜单，我希望获得一个固定的导航高度，因此超出容器宽度的菜单不会中断，但会被隐藏。

ul.fixedHeight {
    height: 50px;
    overflow: hidden;
}

然后我用jQuery检查是否有隐藏的菜单显示button.navbar-toggle滑动并显示隐藏的菜单：

JS：

function showhidebtn(){
    var element = document.querySelector('ul.navbar-nav');
    if((element.offsetHeight < element.scrollHeight) || (element.offsetWidth < element.scrollWidth)){
        $("button.navbar-toggle").removeClass("hidden");
        $("button.navbar-toggle").addClass("visible");
    } else { 
        $("button.navbar-toggle").removeClass("visible");
        $("button.navbar-toggle").addClass("hidden"); }
}

CSS：

@media (min-width: 768px) {
    button.navbar-toggle {
        position: absolute;
        bottom: 0;
        margin-left: -50px;
        background: #000;
    }
    button.navbar-toggle.hidden {
        display:none;
    }
    button.navbar-toggle.visible {
        display:block;
    }
}

最后，如果窗口大小大于768或者调整大小，我会运行该函数。 jsFiddle demo

问题是当窗口大小大于768并且我点击按钮显示隐藏的项目时，滑动不起作用，但是当窗口大小小于768时它可以工作。

任何帮助表示赞赏！谢谢！

Answer 1

如上所述，当按钮点击时，高度限制了它的增长。但是，您可以使用javascript修复此问题：

//initially the button is not clicked
clicked=false;
$('button.navbar-toggle').click(function(){
    if(clicked==false)
    {
        //if the button isn't clicked and you click it,
        //let the height grow and make the overflow property as visible
        $('.nav.navbar-nav.fixedHeight').css('overflow','visible');
        $('.nav.navbar-nav.fixedHeight').css('height','auto');
        clicked=true;
    }
    else
    {
       //vice versa when you need to close it
       $('.nav.navbar-nav.fixedHeight').css('overflow','hidden');
       $('.nav.navbar-nav.fixedHeight').css('height','50px');
        clicked=false;
    }

});

<强> DEMO

如果导航栏具有固定高度，为什么bootstrap下拉不起作用？

1 个答案: