Question

为什么这段代码不起作用？我从bootstrap复制了这段代码。如果我不添加css引用，它可以工作，但只显示纯文本。当我给css引用时，菜单消失了。

<html>
<head>
  <title>Dropdown</title>
  <link rel="stylesheet" type="text/css" href="bootstrap.css">
</head>
<body>
  <link rel="stylesheet" type="text/css" href="bootstrap.css">
  <div class="dropdown">
  <button class="btn dropdown-toggle sr-only" type="button" id="dropdownMenu1" data-toggle="dropdown">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  </ul>
</div>

</body>
</html>

Answer 1

根据documentation for bootstrap：

需要jQuery

请注意，所有JavaScript插件都需要jQuery   要包括在内，如启动器模板中所示。咨询我们的   bower.json查看支持哪些版本的jQuery。

看起来你还需要包含它。尝试在关闭正文标记之前将以下代码行添加到html：

<script src="//code.jquery.com/jquery-1.11.1.min.js" type="text/javascript></script>

希望有所帮助！

修改

如评论中所述，您还应该包含bootstrap.js文件。看起来像是：

 <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

Answer 2

您缺少jQuery和bootstrap.js文件。

Answer 3

你必须在页面的头部添加css和js引用：

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">

 <script src="//code.jquery.com/jquery-1.11.1.min.js" type="text/javascript></script>

<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

Answer 4

在bootstrap.js标记中添加<head>和jQuery文件参考。并且只包含一个bootstrap.css参考。
为什么要在按钮中添加课程sr-only，删除它有效。

<强> Fiddle Demo

Answer 5

这是一个简单的下拉菜单
CSS：

body{
    direction:rtl;
    text-align:right;
}
#a{
    height:200px;
    position:relative;
    background-color:#0F0;
    opacity:0.8;
    font-family:tahoma;
    font-size:12px;
    padding:10px;

}
#nav ul{
    position:relative;
    height:30px;
    list-style:none;
    background:#000;
    padding:0px;
}
#nav ul li{
    display:inline-block;
    width:100px;
    height:30px;
    text-align:center;
}
#nav li{
    background:#000;
}
#nav li:hover{
    background:#999;
}

#nav ul li ul{
    display:none;
    position:absolute;
    top:30px;
}
#nav ul li ul li{
    display:block;
}
#nav ul li:hover ul{
    display:block;
}
#nav a{
    line-height:25px;
    text-decoration:none;
    width:100px;
    color:#fff;
}

HTML：

<div id="a">
    <div id="nav">
        <ul>
            <li><a href="#">home</a></li>
            <li><a href="#">mobile view</a></li>
            <li><a href="#">categories</a>
                <ul>
                    <li><a href="">Cat 1</a></li>
                    <li><a href="">Cat 2</a></li>
                </ul>
            </li>
            <li><a href="#">contact me</a></li>
        </ul>
    </div>
</div>

在jsfiddle
上查看

使用css的HTML下拉菜单

5 个答案: