隐藏/显示内容，与类 changeng 脚本连接

Question

也许你可以给我另一个问题的建议，让我告诉你假设是什么，我想创建一个脚本，单击向下箭头后，将显示 div 内容，然后箭头将变为一个这将表明单击它后内容将隐藏，箭头向上，我制作了一个显示内容的脚本，我还创建了一个分配给 onClick 事件的函数，它将这个图标的类更改为显示一个向上箭头，所以箭头改变了，唯一的问题是，点击向上箭头后，内容没有隐藏，我无法将显示内容的功能与更改类的功能合并，因为显示的功能内容使用类的名称，你能指导我找到一个解决方案或者什么技术最适合做这样的事情吗？我尝试了几种方法，都失败了，谢谢帮助！

//js scripts(first one showing/hiding second one changeing class to change arrow icon)


var div2_elements = document.querySelectorAll(".fa-angle-double-down");
var item2_elements = document.querySelectorAll(".describe");
for (var i = 0; i < div2_elements.length; i++) {
  div2_elements[i].addEventListener("click", function() {
    div2_elements.forEach(function(div) {
      div.classList.remove("active");
    });
    var div_value = this.getAttribute("data-Type");
    item2_elements.forEach(function(item) {
      item.style.display = "none";
    });
    if (div_value == "test1") {
      document.querySelector("." + div_value).style.display = "block";
    } else if (div_value == "test2") {
      document.querySelector("." + div_value).style.display = "block";
    } else {
      console.log("");
    }

  });
};

function myFunction(element) {
  if (element.className == "fas fa-angle-double-down") {
    element.className = "fas fa-angle-double-up";
  } else {
    element.className = "fas fa-angle-double-down";
  }
}

<div class="works-h">
  <p1>titte1</p1><i onclick="myFunction(this)" data-Type="test1" class="fas fa-angle-double-down"></i><br>
  <div class="describe test1" style="display: none;">kontent1</div>
  <br><br>
  <p1>tittle2</p1><i onclick="myFunction(this)" data-Type="test2" class="fas fa-angle-double-down"></i><br>
  <div class="describe test2" style="display: none;">kontent2</div>
</div>

Answer 1

你可以保留你的 HTML 并用这个函数替换所有的 JS。

首先，我们获得被点击元素的下一个兄弟元素，即 DIV。如果它当前被隐藏，显示它并更新 fontawesome 图标。如果它已经可见，请将其隐藏。使用一个函数来切换 DIV 的显示。

   function myFunction(element){
      
      d = document.evaluate("following-sibling::div", element, null,
      XPathResult.FIRST_ORDERED_NODE_TYPE).singleNodeValue
      
      if (d.style.display == "none"){
        d.style.display = "block";
        element.className = "fas fa-angle-double-up";
      }else{
        d.style.display = "none";
        element.className = "fas fa-angle-double-down";
      }
      
    }

我简化了函数，因此您甚至不需要 DIV 上的 data-Type 属性或类“测试”。