Bootstrap下拉列表不起作用

时间:2013-05-20 18:41:49

标签: javascript html twitter-bootstrap drop-down-menu

所以,我知道这是一个常见的问题,但我已经尝试了一切,但却无法让它发挥作用。当我点击它时没有任何反应。 Bootstrap和JQuery加载。
JFiddle:http://jsfiddle.net/qqS4F/
代码:

<div class="navbar-wrapper">
        <div class="container">
            <div class="navbar navbar-inverse">
                <div class="navbar-inner">
                    <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <!-- /.btn -->
                    <a class="brand" href="#">S&J Bakery</a>
                    <div class="nav-collapse collapse">
                        <ul class="nav">
                            <li class="active">
                                <a href="#">Home</a>
                            </li>
                            <li>
                                <a href="#about">About</a>
                            </li>
                            <li class="dropdown" id="#dd">
                                <a href="#dd" class="dropdown-toggle" data-toggle="dropdown" role="button">
                                    Menu
                                    <b class="caret"></b>
                                </a>
                                <ul class="dropdown-menu" role="menu">
                                    <li href="#lunch">Lunch</li>
                                    <li class="divider"></li>
                                    <li href="#cake">Cake</li>
                                </ul>
                            </li>
                            <li>
                                <a href="#contact">Contact Us</a>
                            </li>
                            <li>
                                <a href="#sponsers">Sponsers</a>
                            </li>
                        </ul>
                        <!-- /.nav -->
                    </div>
                    <!-- ./nav-collapse -->
                </div>
                <!-- /.navbar-inner -->
            </div>
            <!-- /.navbar navbar-inverse -->
        </div>
        <!-- /.container -->
    </div>
    <!-- /.navbar-wrapper -->

1 个答案:

答案 0 :(得分:2)

Tips48,

看起来您正在使用不考虑下拉菜单的bootstrap css文件版本。我已经用正确的项目更新了小提琴,它对我来说正常工作(见下面的截图):

enter image description here

如果您需要指向css文件的链接here it is。此外,您可以在http://twitter.github.io/bootstrap/index.html从主站点获取最新版本。一个不错的功能是“自定义”部分,您可以在其中调整项目中您想要/不想要的内容。希望这会有所帮助。

祝你好运,玩得开心!