Bootstrap下拉菜单不起作用

时间:2013-05-31 22:54:28

标签: jquery css twitter-bootstrap

我是一名jQuery初学者,我正试图通过使用Twitter-Bootstrap下拉功能来解决这个问题,但是当我点击“Google”li时,没有任何内容消失。我很困惑为什么它不工作所以我刚开始从Bootstrap网站上example dropdown菜单的代码中把东西扔进我自己的代码中。这将是任何看似多余的代码的解释。

这是我的 jsFiddle

jQuery的:

$(document).ready(function() {
    $('dropdown-toggle').click(function() {
        $(this).dropdown();
    });   
    $('li a').hover(function() {
        $(this).toggleClass("hover");
    });    
});

HTML:

<div id="container">
    <ul class="nav">
        <li class="dropdown">
            <a id="drop1" class="dropdown-toggle" data-toggle="dropdown" role="button" href="#">Google</a>
            <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
                <li>
                    <a href="www.google.com">Google</a>
                </li>
                <li>
                    <a href="www.gmail.com">Gmail</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="www.facebook.com">Facebook</a>
        </li> 
    </ul>
</div> 

为什么下拉菜单不起作用?

附带问题:我的导航菜单li采用了样式,以便当您在每个菜单上方悬停时,背景颜色不会改变,但文字会变成浅灰色。在我链接到Bootstrap之后,悬停现在将背景颜色更改为白色,将文本颜色更改为蓝色。为什么呢?

2 个答案:

答案 0 :(得分:2)

一些事情。设置下拉菜单的方式,您不需要单击触发器打开。你的下拉菜单也在打开,但它出现在滚动条中。通过一些更改,您可以使其工作。

.nav {
    overflow:visible; /*Changed from auto*/
}

#container {
    background-color:#333333;
    width: 100%;
    margin:auto;
    background-image: -moz-linear-gradient(top, rgb(34, 34, 34), rgb(17, 17, 17));
    display:inline-block; /*Added this to get your background color to get applied*/
}

Demo

您可以安全地删除dropdown-toggle点击事件,即使选择器错误,正如@Zenith所提到的那样。 Bootstrap使用标记上的data-toggle="dropdown"来处理它。

第二个问题。 Bootstrap样式会覆盖您的样式。 所以应用这些样式:

而不是.hover使用此:覆盖BS样式: -

.nav>li>a.hover, .nav>li>a:focus {
    color:#C9C9C9;
    background-color:#333333;
}

Full Demo

你也可能不需要

 $('li a').hover(function () {
        $(this).toggleClass("hover");
    });

相反,您可以使用以下方式处理它:

.nav>li>a:hover, .nav>li>a:focus {
        color:#C9C9C9;
        background-color:#333333;
    }

答案 1 :(得分:0)

你可能想在框架下添加jquery给你的小提琴&amp;然后在外部资源下输入http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js并点击加号图标。

删除#nav上的溢出:自动,您实际上可以删除大部分的javascript,然后您会看到导航将在点击上下拉,然后您需要稍微设置样式