2

我是一个 jQuery 初学者，我试图通过使用Twitter-Bootstrap下拉功能来掌握它，但是当我点击 "Google" 时，没有任何东西掉下来li。我很困惑为什么它不起作用，所以我开始从Bootstrap 网站上的示例下拉菜单中的代码中将东西放入我自己的代码中。这将是任何看起来多余的代码的解释。

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

4

2 回答 2

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*/
}

演示

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

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

而不是.hover 使用这个：覆盖BS样式：-

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

完整演示

你也可能不需要

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

相反，您可以使用以下方法处理它：

.nav>li>a:hover, .nav>li>a:focus {
        color:#C9C9C9;
        background-color:#333333;
    }
于 2013-05-31T23:15:21.617 回答
0

您可能想在框架和扩展下将 jquery 添加到您的小提琴中，然后在外部资源下输入http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js并单击加号图标。

删除 #nav 上的溢出：自动，您实际上可以删除大部分 javascript，您会看到导航将在单击时下拉，然后您需要对其进行一些样式设置

于 2013-05-31T23:34:00.760 回答