Bootstrap下拉菜单不起作用 [英] Bootstrap dropdown menu not working

问题描述

我是一个jQuery初学者，我正试图通过使用 Twitter-Bootstrap 下拉功能来解决它​​，但是当我点击Google时没有任何内容 li 。我很困惑为什么它不工作所以我刚开始从示例下拉菜单。这将是任何似乎多余的代码的解释。

I am a jQuery beginner and am trying to get the hang of it by using the Twitter-Bootstrap dropdown feature, but nothing drops down when I click on the "Google" li. I was pretty confused about why it wasn't working so I just started throwing things into my own code from the code from the example dropdown menu on the Bootstrap website. That would be the explanation for any code that seems superfluous.

这是我的 jsFiddle 。

Here is my 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> 

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

Why is the drop-down menu not working?

附带问题：我的导航菜单 li s样式，以便当你在每个上面盘旋时，背景颜色不会改变，但文字会变成浅灰色。在我链接到Bootstrap之后，悬停现在将背景颜色更改为白色，将文本颜色更改为蓝色。为什么？

Side question: I had my navigation menu lis styled so that when you hovered over each, the background color would not change but the text would become a lighter grey. After I linked to Bootstrap, hovering now changes the background color to white and the text color to blue. Why?

推荐答案

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

Couple of things. The way you have your drop-downs set up, you don't need the click trigger to open up. Also your dropdowns were opening up but it was showing up in the scroll. With a couple of changes you can make it work.

.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所提到的那样。 Bootstrap使用标记上的 data-toggle =dropdown来处理它。

Demo

You can safely remove your dropdown-toggle click event, even though the selector was wrong, as @Zenith mentioned. Bootstrap takes care of it using data-toggle="dropdown" on the markup.

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

For your second question. Bootstrap styles overrides your styles. So apply these styles:

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

instead of .hover use this: to override BS styles:-

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

完整演示

您可能也不需要

Full Demo

Also you probably don't need

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

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

Instead, you can handle it with:

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

这篇关于Bootstrap下拉菜单不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！