个人中心
gpt4 book ai didi

html - 下拉菜单不查看其元素

转载 作者：行者123 更新时间：2023-11-28 00:39:21 25 4
gpt4 key购买 nike

我想创建一个下拉菜单，当我单击向下箭头的字形图标时，它应该会显示包含这些元素的下拉菜单 [消息、注销等]。但是当我点击它时什么也没有出现，这里缺少什么？

//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 文件有问题，但我找不到确切的位置。

最佳答案

您在导航栏上有效地隐藏了溢出。删除它。 

.navbar {
    /* overflow: auto; */
}

Demo

您需要熟悉浏览器的文档检查器。它将使诊断这样的事情变得几乎毫不费力。

关于html - 下拉菜单不查看其元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54469265/

25 4 0
文章推荐： C++ 如何从标准输入加载到最多 5 个字母数字字符的字符数组？
文章推荐： javascript - 键盘事件.code
文章推荐： c++ - 在构造函数中默认类的结构字段
文章推荐： javascript - 从 JavaScript-Ajax 到 php 的数组关联