Question

我是Java语言的初学者/弱者，我知道我需要在这里动态地将一个类应用于另一个元素以使其隐藏（即-手风琴）。

基本上，我有以下无序列表：

<ul class="category-0">
 <li class="list-0">
  <div class="submenu">
   <p><a href="#list-1">Item One</a><p>
   <p>100</p>
  </div>
  <ul class="category-1">
   <li class="list-1">
    <div class="submenu">
     <p><a href="#list-2">Sub item One</a></p>
     <p>50></p>
    </div>
   </li>
  </ul>
 </li>
</ul>

我正在尝试将手风琴放在List-0上，以便在单击链接时显示List-1。我已经设置了.list-1 {display：none;}和.active {display：block！important;}。因此，现在列表1未显示。在我的JavaScript中，我有：

var acc = document.getElementsByClassName("list-0");
var i;
for (i = 0; i< acc.length; i++){
  acc[i].addEventListener("click", function(){
    this.classList.toggle("active");
    var list = getElementsByClassName("list-1");
    if (list.style.display =="none") {
      list.style.display = "block";
    } else {
      list.style.display = "none";
    }
  })
};

当我运行它时，它会切换，但仅在list-0而不是list-1上切换。我已经尝试过尝试var list = this.nextElementSibling;的变体；以及看看我是否正确打了。似乎不起作用。

那我该如何在列表1上切换活动类？

Answer 1

您的问题是，当您将类更改为活动状态时，您将无法再通过类名称“ list-1”查找元素，因为它不再属于该类，因此可以解决此问题：

JavaScript

function acc1() {
  var subList = document.getElementById("list-1");
  if(subList.classList.contains("invisible")) {
    subList.classList.replace("invisible", "active");
  }
  else {
    subList.classList.replace("active", "invisible");
  }
}

CSS

.invisible {display: none !important;}
.active {display: block !important;}

HTML

<!DOCTYPE HTML>
<html>
<body>
  <ul class="category-0">
 <li class="list-0">
  <div class="submenu">
   <p><a href="#list-1" onclick="acc1()">Item One</a><p>
   <p>100</p>
  </div>
  <ul class="category-1">
   <li id="list-1" class="invisible">
    <div class="submenu">
     <p><a href="#list-2">Sub item One</a></p>
     <p>50></p>
    </div>
   </li>
  </ul>
 </li>
</ul>
</body>
</html>

单击时将Java语言应用于其他类

1 个答案: