javascript - 如果导航栏具有固定高度，为什么 Bootstrap 下拉菜单不起作用？

Question

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

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