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

Question

我正在尝试在导航栏内实现一个下拉菜单，它应该在用户点击时显示并在点击外部任何地方时消失(比如 Facebook 的下拉菜单有注销等)。但是下拉菜单没有按应有的方式工作。我在 StackOverflow 和互联网上到处搜索，但找不到解决方案。我只想使用 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');
      }
    }
  }
}

附言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