我想创建一个下拉菜单，当我单击向下箭头的字形图标时，它应该会显示包含这些元素的下拉菜单 [消息、注销等]。 但是当我点击它时什么也没有出现，这里缺少什么？
//Html File:
<html>
<!-- Head -->
<head>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-theme.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/bootstrap-social.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<!-- Body -->
<body>
<div class="navbar">
<a href="#"><i class="fa fa-home"></i> Marble </a>
<a class="left"> <i onclick="myFunction(this)" class=" fa fa-bell" ></i> Notifications </a>
<a class="left user"> <i class=" fa fa-user-circle"> </i> User </a>
<div class="dropdown">
<a class="editClass dropdown-toggle" data-toggle="dropdown" > <span class=" glyphicon glyphicon-menu-down"></span> </a>
<ul class="dropdown-menu"> //when i remove class="dropdown-menu", the items appears but the drop down is gone, and when i add them back, the items are not shown when i click the drop down icon.
<li> <a> <i class="fa fa-envelope-o"></i> Messages </a> </li>
<li role="separator" class="divider"></li>
<li> <a> <i class="fa fa-hourglass-3"></i> Timeline </a> </li>
<li role="separator" class="divider"></li>
<li> <a> <i class="fa fa-cog"></i> Settings </a> </li>
<li role="separator" class="divider"></li>
<li> <a> <span class="glyphicon glyphicon-log-out"></span> Log Out </a> </li>
<li role="separator" class="divider"></li>
</ul>
</div>
</div>
<div>
<img src="Diagram.png" alt="diagram" width="400" height="300">
</div>
<div>
<p id="sentence"> "You don't have any projects" </p>
<button onclick="createProject()" class="button1 btn btn-lg"> <b> Add Project </b> </button>
</div>
<div>
<form class="form-popup" id="projects">
<h2 align="center"> <span class="glyphicon glyphicon-th"></span> New Project </h2>
<input type="text" placeholder="Project Name" required> <br>
<textarea placeholder="Project Description" required=""></textarea> <br>
<p> Start Date: </p>
<p> End Date: </p>
<input type="Date" name="start Date" required="">
<input type="Date" name="End Date" required="">
<h2 align="center"> <span class="glyphicon glyphicon-book"> </span> References </h2>
<div id="refTextBoxes">
<input type="text" placeholder="Add Reference" required> <br>
</div>
<button onclick="addRef()"> Add another </button> <br>
<button type="submit" onclick="hideAndAdd()" > Done </button>
<!-- class="btn" bt3ml el button shakl kda 7elw -->
</form>
</div>
<script>
function myFunction(x)
{
x.classList.toggle("fa-bell-slash");
}
function createProject()
{
document.getElementById("projects").style.display = "block";
}
function addRef()
{
var totalTextBoxes = document.getElementsByClassName("input_text");
totalTextBoxes = totalTextBoxes.length + 1;
document.getElementById("refTextBoxes").innerHTML=document.getElementById("refTextBoxes").innerHTML+
"<input type='text' class='input_text' id='input_text"+totalTextBoxes+"' placeholder='Add Reference' + required> <br>";
}
function hideAndAdd()
{
var x = document.getElementById("sentence");
x.style.display = "none";
}
</script>
</body>
<!-- Closing of html tag -->
</html>
//Css File:
body
{
font-family: Arial, Helvetica, sans-serif;
/* background-color: #ABB1BA; */
}
.form-popup
{
display: none;
}
/* Style the navigation bar */
.navbar
{
width: 100%;
background-color: #877ebf;
overflow: auto;
}
/* Navbar links */
.navbar a
{
float: left ;
text-decoration: none;
color: #CCCCCC;
font-size: 17px;
padding: 12px;
}
/* Navbar links on mouse-over */
.navbar a:hover, i:hover, span:hover
{
background-color: #555;
cursor: pointer;
}
img
{
display: block;
margin-left: auto;
margin-right: auto;
}
p
{
text-align: center;
font-family: "Arial Black", Gadget, sans-serif;
font-size: 20px;
}
button
{
text-align: center;
font-size: 16px;
margin: 25px 475px;
cursor: pointer;
}
.button1
{
background-color: #CCCCCC;
color: #333333;
border: 4px solid #877ebf;
}
/*
.navbar i.editClass, span.editClass
{
float: right;
}
*/
.left
{
position: absolute;
right:135;
}
.user
{
/*margin: 25px 25px; */
/*float: right;
padding: 100px; */
position: absolute;
right:40;
}
.editClass
{
position: absolute;
right:5;
}
/* Add responsiveness - will automatically display the navbar vertically instead of horizontally on screens less than 500 pixels */
@media screen and (max-width: 500px) {
.navbar a {
float: none;
display: block;
}
}
我在这里使用 Bootstrap、html 和 css。 我认为 css 文件有问题，但我找不到确切的位置。
最佳答案
关于html - 下拉菜单不查看其元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54469265/