时间戳

首页 > 解决方案 > classLList.toggle 属性不适用于 getElementsByClassName

javascript - classLList.toggle 属性不适用于 getElementsByClassName

问题描述

我的 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";
  }
}

以上工作正常，但问题是我必须双击每个页面重新加载以使下拉菜单出现。

标签： javascripthtmlcss

解决方案

您的 javascript 代码实际上正在运行。但问题是你的css在应用nav .dropdown ul时display: none比classdisplay: block的权重更大。.show这就是为什么即使在toggleClass执行之后，您的元素也不会显示在 DOM 中。因为即使在应用了display: blockofshow类之后，dsplay: noneofnav .dropdown ul也将是活动样式，因为类选择具有更大的权重。解决这个问题的最好方法是让.show课程更具体。也就是说，在应用时，它将优先考虑类的属性，而不是show使用。nav .dropdown ul.showdisplayshow

function showDropDownMenu(className) {
  document.getElementsByClassName(className)[0].classList.toggle("show");
}
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;
}

nav .dropdown ul.show {
  display: block;
}
<nav>
  <ul>
    <li onclick="showDropDownMenu('dropdown-menu')" class="dropdown nav-icon">
      Click Here
      <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>

推荐阅读