防止活动的手风琴项目在点击时关闭

Question

我正在为一个网站设计，但我对任何类型的编码都是超级新手，所以有很多我不知道答案（而且一直无法找到还没有）。

目前，我想知道是否可以使用我目前拥有的代码来防止在单击 header 时关闭活动手风琴 item/panel。

这是我当前代码的相关部分：

var acc = document.getElementsByClassName("accordionHeader");
var panel = document.getElementsByClassName('accPanel');

for (var i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    var setClasses = !this.classList.contains('open');
    setClass(acc, 'open', 'remove');
    setClass(panel, 'open', 'remove');
    if (setClasses) {
      this.classList.toggle("open");
      this.nextElementSibling.classList.toggle("open");
    }
  }
}

function setClass(els, className, fnName) {
  for (var i = 0; i < els.length; i++) {
    els[i].classList[fnName](className);
  }
}
document.getElementById("defaultOpen").click();

.accordionHeader {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}

.accPanel {
  padding: 0 18px;
  background-color: white;
  display: none;
  overflow: hidden;
  transition: max-height 0.5s ease-out;
}

.open {
  display: block;
}

<!DOCTYPE html>
<html>

<head>
  <title>polka time</title>
</head>

<body>
  <div>
    <button class="accordionHeader" id="defaultOpen">section 1</button>
    <div class="accPanel">
      At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia
      animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda
      est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis
      voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
    </div>

    <button class="accordionHeader">section 2</button>
    <div class="accPanel">
      At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia
      animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda
      est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis
      voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
    </div>
    <button class="accordionHeader">section 3</button>
    <div class="accPanel">
      At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia
      animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda
      est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis
      voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
    </div>
  </div>

  <script src="character page js.js" type="text/javascript"></script>
</body>

</html>

如果可能的话，我不想太更改代码，因为我只是让它工作（或多或少）。我确定我的代码一团糟，因为我一直主要是在复制教程。

此外，如果有一种让手风琴动画的好方法，那将是一种奖励。

Answer 1

您可以向函数添加另一个 isOpen 状态检查，如下面的代码片段所示，这样您就不会在元素打开时删除 open class。

完整代码如下。

// change
setClass(acc, 'open', 'remove');
setClass(panel, 'open', 'remove');

// to
var isOpen = !!this.classList.contains('open');
if (!isOpen){
    setClass(acc, 'open', 'remove');
    setClass(panel, 'open', 'remove');
}

var acc = document.getElementsByClassName("accordionHeader");
var panel = document.getElementsByClassName('accPanel');

for (var i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    var setClasses = !this.classList.contains('open');
    var isOpen = !!this.classList.contains('open');
    if (!isOpen){
        setClass(acc, 'open', 'remove');
        setClass(panel, 'open', 'remove');
    }

    if (setClasses) {
      this.classList.toggle("open");
      this.nextElementSibling.classList.toggle("open");
    }
  }
}

function setClass(els, className, fnName) {
  for (var i = 0; i < els.length; i++) {
    els[i].classList[fnName](className);
  }
}
document.getElementById("defaultOpen").click();

.accordionHeader {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}

.accPanel {
  padding: 0 18px;
  background-color: white;
  display: none;
  overflow: hidden;
  transition: max-height 0.5s ease-out;
}

.open {
  display: block;
}

<!DOCTYPE html>
<html>

<head>
  <title>polka time</title>
</head>

<body>
  <div>
    <button class="accordionHeader" id="defaultOpen">section 1</button>
    <div class="accPanel">
      At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia
      animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda
      est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis
      voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
    </div>

    <button class="accordionHeader">section 2</button>
    <div class="accPanel">
      At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia
      animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda
      est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis
      voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
    </div>
    <button class="accordionHeader">section 3</button>
    <div class="accPanel">
      At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia
      animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda
      est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis
      voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
    </div>
  </div>

  <script src="character page js.js" type="text/javascript"></script>
</body>

</html>

Answer 2

此解决方案将防止活动 header 在单击新 header 时关闭。

var acc = document.getElementsByClassName("accordionHeader");
var panel = document.getElementsByClassName('accPanel');

for (var i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    var setClasses = !this.classList.contains('open');
    var thisPanel = this.nextElementSibling;

    setClass(this, 'open', 'remove');
    setClass(thisPanel, 'open', 'remove');

    if (setClasses) {
      this.classList.toggle("open");
      this.nextElementSibling.classList.toggle("open");
    }

  }

}

function setClass(el, className, fnName) {
  el.classList[fnName](className);
}
document.getElementById("defaultOpen").click();

.accordionHeader {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}

.accPanel {
  padding: 0 18px;
  background-color: white;
  display: none;
  overflow: hidden;
  transition: max-height 0.5s ease-out;
}

.open {
  display: block;
}

<!DOCTYPE html>
<html>

<head>
  <title>polka time</title>
</head>

<body>
  <div>
    <button class="accordionHeader" id="defaultOpen">section 1</button>
    <div class="accPanel">
      At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia
      animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda
      est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis
      voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
    </div>

    <button class="accordionHeader">section 2</button>
    <div class="accPanel">
      At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia
      animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda
      est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis
      voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
    </div>
    <button class="accordionHeader">section 3</button>
    <div class="accPanel">
      At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia
      animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda
      est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis
      voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
    </div>
  </div>

  <script src="character page js.js" type="text/javascript"></script>
</body>

</html>

防止活动的手风琴项目在点击时关闭

Prevent active accordion item from closing on click

javascript

html

css

accordion