如何使这个bootstrap导航子菜单始终打开?

时间:2016-06-11 05:13:41

标签: javascript jquery css twitter-bootstrap

我有一个代码来制作bs nav,但我不明白如何在不点击菜单名称的情况下使子菜单始终打开。

这是代码:

http://jsfiddle.net/6hrmodok/2/

请用新代码回答这个问题。

3 个答案:

答案 0 :(得分:0)

.gw-nav-list>li.always-active>a, 
.gw-nav-list>li.always-active>a:hover, 
.gw-nav-list>li.always-active>a:focus, 
.gw-nav-list>li.always-active>a:active {
    background-color: #fff;
    color: #2574A9;
    font-weight: bold;
    font-size: 13px;
}
.gw-nav-list>li.always-active:before {
    display: inline-block;
    content: "";
    position: absolute;
    left: 0px;
    top: -1px;
    bottom: 0;
    z-index: 1;
    border: 2px solid #2574A9;
    border-width: 0 0 0 5px;
}
.always-active .gw-submenu,
.gw-nav-list>li.always-active .gw-submenu {
    display:block;
}

对于JavaScript;

$('.gw-nav > li:not(.always-active) > a').click(function () { 
     ....

Updated fiddle

答案 1 :(得分:0)

您可以使用简单的jquery代码在页面加载中打开子菜单,如下所示。

var pageload = function()
{
     $(".gw-nav > li").each(function () 
   { 

      var checkElement = $(this);
      var ulDom = checkElement.find('.gw-submenu')[0];

        if (ulDom != undefined) {
            checkElement.addClass('active');
            checkElement.find('ul').slideDown(300);
            return;
        }

   });

}();

在这里检查小提琴手。

http://jsfiddle.net/o1jw4txg/

答案 2 :(得分:0)

要使子菜单始终在引导程序导航栏中打开,您只需要添加一个“打开”类,如<li class="dropdown open">这将使您的引导程序的导航栏子菜单始终打开,它也将切换。