我的HTML代码用于导航栏:

<Nav>
    <ul>
      <li onclick="showDropDownMenu('dropdown-menu')" class="dropdown nav-icon">
        <span class="fa fa-fw fa-bars"></span> 
        <ul class="dropdown-menu">
          <li><a href="#">Home</a></li>
          <li><a href="#">Games</a></li>
          <li><a href="#">Workout</a></li>
          <li><a href="#">Yoga</a></li>
          <li><a href="#">About Us</a></li>
        </ul>
      </li>
      <li class="home nav-icon"><a href="#"><i class="fa fa-fw fa-home"></i></a></li>
      <li class="active nav-btn"><a href="#">Home</a></li>
      <li class="nav-btn"><a href="#">Games</a></li>
      <li class="nav-btn"><a href="#">Stay Fit</a></li>
      <li class="nav-btn"><a href="#">About Us</a></li>
    </ul>
    <form class="nav-search">
      <input type="search" name="Search" class="text-area" placeholder="Search...">
      <span class="fa fa-fw fa-search search-btn"></span>
    </form>
  </Nav>

和第二个ul元素的我的css

nav .dropdown ul{
display: none;
  position: absolute;
  background: black;
  min-width: 150px;
  left: 0;
  box-shadow: 5px 8px 16px 0px rgba(0,0,0,0.5);
  z-index: 1;
  transition: visibility 0.3s linear;
}

.show{
  display: "block";
}

我的Js代码是 showdropdownmenu.js

function showDropDownMenu(className)
{
  document.getElementsByClassName(className)[0].classList.toggle("show");
};

而且不起作用。下拉根本不起作用。我不知道怎么回事。已经查找错误了。

但是如果我使用Display.Block属性，它就可以工作了。Js如下所示--

function showDropDownMenu(className)
{
  var x = document.getElementsByClassName(className);
  if(x[0].style.display = "none"){
    x[0].style.display = "block";
  }
  else
  {
    x[0].style.display = "none";
  }
}

上面的工作很好，但问题是我必须在每次重新加载页面时双击一个，才能显示下拉图。

顺晟科技：