使用 JS 单击链接时更改 CSS 中的设置答案

【问题标题】：Change setting in CSS when link is clicked using JS使用 JS 单击链接时更改 CSS 中的设置
【发布时间】：2018-12-06 16:41:51
【问题描述】：

我正在尝试使用“全部展开”按钮。我可以让所有 div 标签展开，但不能让加号切换到减号（这是当您一次单击加号时发生的情况 - 它会展开并变为减号。）我想我需要以某种方式操纵这个标签@ 987654322@ 更改其“内容”设置，但如何？我可以用javascript来做吗？这是代码。请帮忙。

function expandAll() {
  var elements = document.getElementsByClassName("panel");
  //enter code here
  for (var i = 0; i < elements.length; i++) {
    var panel = elements[i];
    panel.style["display"] = "block";

  }

}

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  }
}

p.accordion {
  cursor: pointer;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  transition: 0.4s;
}

p.accordion.active,
p.accordion:hover {
  background-color: #ddd;
}

p.accordion:before {
  content: '\002B';
  float: left;
}

p.accordion.active:before {
  content: "\2212";
}

div.panel {
  padding: 0 18px;
  display: none;
  background-color: white;
}

<h2>Accordion</h2>
<button onclick="expandAll();">Expand All</button>
<p class="accordion">Section 2</p>
<div class="panel">
  <p class="accordion">Section 1</p>
  <div class="panel">
    <p>
      content
    </p>
  </div>
</div>

<p class="accordion">Section 3</p>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

【问题讨论】：

可能与stackoverflow.com/questions/12843418/…重复
@YashSoni OP 帖子中没有 jquery。
在 x 之后停止工作多次是什么意思？ document.querySelectorAll('p.accordion') 可能有问题？尝试更具体的选择器。
谢谢。我认为我的代码中还有其他问题。现在可以了。我不确定到底是什么问题 - 可能是无关的。

标签： javascript html css

【解决方案1】：

您已经有课程active。只需将其添加到所有p。

document.querySelector('button').addEventListener('click', expandAll)
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  }
}

function expandAll() {
  var elements = document.getElementsByClassName("panel");
  var accordions = document.querySelectorAll('p.accordion')
  for (var i = 0; i < elements.length; i++) {
    var panel = elements[i];
    panel.style["display"] = "block";
    accordions[i].classList.add("active");
  }

}

p.accordion {
  cursor: pointer;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  transition: 0.4s;
}

p.accordion.active,
p.accordion:hover {
  background-color: #ddd;
}

p.accordion:before {
  content: '\002B';
  float: left;
}

p.accordion.active:before {
  content: "\2212";
}

div.panel {
  padding: 0 18px;
  display: none;
  background-color: white;
}

<h2>Accordion</h2>
<button>Expand All</button>
<p class="accordion">Section 2</p>
<div class="panel">
  <p class="accordion">Section 1</p>
  <div class="panel">
    <p>
      content
    </p>
  </div>
</div>

<p class="accordion">Section 3</p>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

【讨论】：