Question

我正在尝试在FAQ页面上修复此手风琴。单击h3标签时，该问题应打开带有答案的p标签。不幸的是，不能使用任何类名或类似的名称。现在，我们的客户只需添加h3和p标签即可创建一个新问题。我想一次提出一个问题。有人可以帮助我吗？

async

<style>
.faq h3{ background: #e2001a; color: #fff; padding: 5px 10px; cursor: 
pointer; user-select: none;}


.show {
display: block;
}
</style>

<div class="faq">
<h1>FAQ</h1>

<h3>Question 1</h3>
 <p>Lorem ipsum</p>

 <h3>Question 2</h3>
 <p>Lorem ipsum</p>

 <h3>Question 3</h3>
 <p>Lorem ipsum</p>

Answer 1

使用nextElementSibling定位每次点击的h3的段落。

// Grab all the h3s and paras
const h3s = document.querySelectorAll('h3');
const paras = document.querySelectorAll('p');

// Add click listeners to each h3
h3s.forEach(h3 => h3.addEventListener('click', handleClick, false));

function handleClick() {

  // Grab the nextElementSibling from the clicked element
  const { nextElementSibling: next } = this;

  // Remove all `show` classes from the paras
  paras.forEach(para => para.classList.remove('show'));

  // Add a show class to the sibling para
  next.classList.toggle('show');
}

p {
  visibility: hidden;
  height: 0px;
}

.show {
  visibility: visible;
  height: auto;
}

<div class="faq">
<h1>FAQ</h1>

<h3>Question 1</h3>
<p>Lorem ipsum</p>

<h3>Question 2</h3>
<p>Lorem ipsum</p>

<h3>Question 3</h3>
<p>Lorem ipsum</p>

</div>

Answer 2

选择器中有一些小错误。在 getElementsByClassName('name') 中，名称必须是一个简单的字符串（类 name ），但是您可以使用 getElementsByTagName('name')查找子节点-例如。

如果要使用CSS选择器，请改用querySelectorAll：

var acc = document.querySelectorAll("div.faq > h3");
var panel = document.querySelectorAll('div.faq > p');

此示例使用getElementsByClassName和getElementsByTagName：

var faq = document.getElementsByClassName("faq")[0];
var acc = faq.getElementsByTagName('h3');
var panel =  faq.getElementsByTagName('p');

for (var i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    var setClasses = !this.classList.contains("active");
    setClass(acc, "active", "remove");
    setClass(panel, "show", "remove");

    if (setClasses) {
      this.classList.toggle("active");
      this.nextElementSibling.classList.toggle("show");
    }
  };
}

function setClass(els, className, fnName) {
  for (var i = 0; i < els.length; i++) {
    els[i].classList[fnName](className);
  }
}

.faq h3 { 
  background: #e2001a; 
  color: #fff; 
  padding: 5px 10px; 
  cursor: pointer; 
  user-select: none;
}

.faq p {
  display: none;
}
.faq p.show {
  display: block;
}

<div class="faq">
  <h1>FAQ</h1>
  <h3>Question 1</h3>
   <p>Lorem ipsum</p>

   <h3>Question 2</h3>
   <p>Lorem ipsum</p>

   <h3>Question 3</h3>
   <p>Lorem ipsum</p>
</div>

如何在不使用类名的情况下在网站上获取常见问题解答？

2 个答案: