Question

我正在尝试在导航栏中实现一个下拉菜单，该菜单应显示在用户点击上，并在点击外面的任何地方时消失（如Facebook的下拉菜单中有注销等）。但是下拉列表并没有按照预期的方式运行。我在StackOverflow和互联网上到处搜索但无法找到解决方案。我想仅使用CSS和JavaScript来实现它，因为我不懂jQuery和其他语言。

这是我的小提琴：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。小提琴甚至没有显示点击下拉，而它显示在我的本地主机上，如下所示：

非常感谢任何帮助。谢谢。：）

Answer 1

你想要like this的东西吗？你想要的行为目前正在发挥作用，我只想应用一些CSS来更好地设计它。

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

height: auto上的ul以及overflow: hidden家长上的ul，您可以按照自己的方式进行操作：See it here

Answer 2

javascript部分缺少右括号，原因是小提琴不起作用

此链接可能会有所帮助

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

导航栏中的可点击下拉菜单无效

2 个答案: