导航栏中的可点击下拉菜单不起作用

Question

我正在尝试在导航栏内实现一个下拉菜单，它应该在用户点击时显示并在点击外部的任何地方时消失（比如 Facebook 的注销下拉菜单等）。但是下拉菜单没有按应有的方式工作。我在 Whosebug 和互联网上到处搜索，但找不到解决方案。我只想使用 CSS 和 JavaScript 来实现它，因为我不懂 jQuery 和其他语言。

这是我的fiddle：https://jsfiddle.net/8ahy32yn/9/

我实现的代码如下：

HTML

<div id="navbar">
<ul>
   <li>
      <a href="movies.php">Home</a>
   </li>
   <li>
      <a href="faq.php">FAQs</a>
   </li>
   <li class="user" style="float:right;">
      <a href="#" class="dropbtn" onclick="UserDropdown()">Dropdown</a>
      <ul id="UserContent" class="user-content">
          <li>
            <a href="profile.php">Profile</a>
          </li>
          <li>
            <a href="gifts.php">My Gifts</a></li>
          <li>
            <a href="logout.php">Logout</a>
          </li>
      </ul>
   </li>
</ul>

CSS

ul 
{
    list-style-type: none;     
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: black;  
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 55px;
}

li
{
  float: left;
}

li a
{
  text-decoration: none;
  display: block;
  padding: 20px 25px;
  color: white;
  text-align: center;
}

li a:hover
{
  background-color: #333333;
}

.user
{
  position: relative;
  display: inline;
}

.dropbtn
{
  cursor: pointer;
}

.user-content 
{
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 100px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.user-content a 
{
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.user-content a:hover 
{
  background-color: #F1F1F1;
}

.show 
{
  display:block;
}

JavaScript

function UserDropdown() {
    document.getElementById("UserContent").classList.toggle("show");
}

window.onclick = function(event) 
{
  if (!event.target.matches('.dropbtn')) 
  {
    var dropdowns = document.getElementsByClassName("user-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) 
     {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show'))
      {
        openDropdown.classList.remove('show');
      }
    }
  }
}

P.S。 Fiddle 甚至在点击时不显示下拉菜单，而它在我的本地主机上显示如下：

如有任何帮助，我们将不胜感激。谢谢。 :)

Answer 1

你想要什么like this？您想要的行为目前有效，我只是应用了一些 CSS 来更好地设置样式。

.show 
{
  display:block;
  width: 245px; 
  right: 0; 
  left: auto;
  line-height: 30px;
  overflow: hidden
}

在 ul 上使用 height: auto 并在 ul 父级上删除 overflow: hidden，您可以按照自己的方式进行操作：See it here

Answer 2

javascript 部分缺少右大括号，原因是在 fiddle

中不起作用

这个link可能会有帮助

http://www.w3schools.com/howto/howto_js_dropdown.asp

导航栏中的可点击下拉菜单不起作用

Clickable dropdown Menu in Navigation Bar not working

html

javascript

css

navigationbar

drop-down-menu