Question

我是一名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之后，悬停现在将背景颜色更改为白色，将文本颜色更改为蓝色。为什么呢？

Answer 1

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

.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;
    }

Answer 2

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

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

Bootstrap下拉菜单不起作用

2 个答案:

Demo

Full Demo