HTML下拉选项卡无法打开

时间:2013-11-13 04:48:23

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

我正在尝试使用bootstrap模板构建我的第一个网站,我无法在导航栏中显示下拉按钮以显示任何内容或打开。它将以我想要的方式显示所有内容,但由于某种原因,它的“开放”功能无法正常工作。

以下是我在HTML部分中的内容:

 <li div class="dropdown">
              <a data-toggle="dropdown" href="#" class="dropdown-toggle" data-        
                 toggle="dropdown">General Education <b class="caret"></b></a>


              <ul class="dropdown-menu">
                <li><a href="gened.html">Composition</a></li>
                <li><a href="#">American Institutions</a></li>
                <li><a href="#">Humanities</a></li>
                <li><a href="#">Physical Sciences</a></li>
                <li><a href="#">Quantitative Literacy</a></li>
                <li><a href="#">Fine Arts</a></li>
                <li><a href="#">Interdisciplinary</a></li>
                <li><a href="#">Social Sciences</a></li>
                <li><a href="#">Fine Arts</a></li>

              </ul>
            </li>

(我还没有更新所有目标链接,现在大多数只显示为#)

并且我有CSS:

.dropdown-toggle:active,
.open .dropdown-toggle {
 outline: 0;
}

请帮忙!

1 个答案:

答案 0 :(得分:1)

代码<li class="dropdown">出错尝试此代码 您的页面不包含必要的js文件,因此请在

部分插入tis行

脚本

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>

HTML

<li class="dropdown">
              <a data-toggle="dropdown" href="#" class="dropdown-toggle" data-        
                 toggle="dropdown">General Education <b class="caret"></b></a>


              <ul class="dropdown-menu">
                <li><a href="gened.html">Composition</a></li>
                <li><a href="#">American Institutions</a></li>
                <li><a href="#">Humanities</a></li>
                <li><a href="#">Physical Sciences</a></li>
                <li><a href="#">Quantitative Literacy</a></li>
                <li><a href="#">Fine Arts</a></li>
                <li><a href="#">Interdisciplinary</a></li>
                <li><a href="#">Social Sciences</a></li>
                <li><a href="#">Fine Arts</a></li>

              </ul>
            </li>

示例标记

<!-- start: User Dropdown -->
    <li class="dropdown">
    <a id= "uname" style="color:#fff;text-shadow:none" class="btn dropdown-toggle" data-toggle="dropdown" href="#"><i class="icon-user"></i> 
    Admin
    <span class="caret"></span>                         
    </a>
    <ul class="dropdown-menu">
    <li><a href="#" ><i class="icon-lock"></i> Change Password</a></li>
    <li><a href="#"><i class="icon-off"></i> Logout</a></li>
    </ul>
    </li>
<!-- end: User Dropdown -->