默认情况下如何使手风琴类扩展

时间：2018-08-03 16:17:26

标签： javascript

我想知道是否有人知道如何使手风琴只扩展第一个项目？这是一个示例，但是我希望第一个扩展，或者根据情况而定，第二个或第三个，或者全部。

显示所有折叠的示例：https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_accordion

需要确定如何进行一个或多个扩展。谢谢！ 

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

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}
.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

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

.panel {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}
<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>

  <h2>Accordion</h2>

  <button class="accordion">Section 1</button>
  <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>

  <button class="accordion">Section 2</button>
  <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>

  <button class="accordion">Section 3</button>
  <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>

</body>

</html>

3 个答案:

答案 0 :(得分：0)

将类selected定义为display:block并切换该类，而不是更改实际元素上的显示样式。然后只需将active添加到第一个元素

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

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

.panel {
    padding: 0 18px;
    display: none;
    background-color: white;
    overflow: hidden;
}
.panel.active {
  display: block;
}
</style>
</head>
<body>

<h2>Accordion</h2>

<button class="accordion">Section 1</button>
<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>

<button class="accordion">Section 2</button>
<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>

<button class="accordion">Section 3</button>
<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>

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

for (i = 0; i < acc.length; i++) {
    acc[i].addEventListener("click", function() {
        this.classList.toggle("active");
    });
}
</script>

</body>
</html>

答案 1 :(得分：0)

为此您可以利用first-child selector。只需将所有手风琴包装在一个容器中，然后将每个手风琴的按钮和内容也包装在一个容器中即可：

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

for (i = 0; i < acc.length; i++) {
    acc[i].addEventListener("click", function() {
        this.classList.toggle("active");
        var panel = this.nextElementSibling;
        if (panel.style.display === "block") {
            panel.style.display = "none";
        } else {
            panel.style.display = "block";
        }
    });
}
.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

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

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

/* EXPAND THE FIRST ACCORDION */
.acc-item:first-child .panel {
  display:block;
}
<h2>Accordion</h2>
<div class="container">
  <div class="acc-item">
    <button class="accordion">Section 1</button>
    <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>
  </div>

  <div class="acc-item">
    <button class="accordion">Section 2</button>
    <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>
  </div>

  <div class="acc-item">
    <button class="accordion">Section 3</button>
    <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>
  </div>
</div>

答案 2 :(得分：0)

根据我自己喜欢的页面构建样式，我采用了不同的方法...

  1. 我希望我的标记（即我的DOM结构）具有语义；对我要实现的事情进行逻辑建模。

  2. 我喜欢避免直接操作元素上的样式。我操纵元素的 state ，然后将样式应用于不同的状态。通常，这意味着添加基于事物 及其状态 的描述性类，而不是基于外观的类。

从这些“规则”中，我认为手风琴是 widget －一种包含多个部分的控件。每个部分都有一个标题和一个 panel （像您一样，我一直使用button作为标题，但我可能会将其设为{{1 }}我自己）

<header>

我从您的样式开始，并修改了选择器以匹配我的新布局，每个选择器都以<!-- an accordion --> <div class="accordion"> <section class="panel">...</section> <section class="panel">...</section> <section class="panel">...</section> </div> <!-- a section within an accordion --> <section class="panel"> <button>Section 1</button> <div class="panel"> ... contents of panel ... </div> </section> 开头，因此它只影响手风琴小部件中的内容。
标记为{em> button 的.accordion成为.accordion { ... }，用于在手风琴控件的每个部分中选择按钮。

然后，由于我不喜欢直接操作元素上的样式，因此我决定每个部分都可以是.accordion > section > button或“ not-open”-即，将出现类或缺席。这样做使我可以简单地声明在标记中打开的部分：

open

这也简化了javascript；它所要做的就是切换“打开”类-不必测试当前状态。

<section class="open> ... </section> <!-- a section that starts open -->
<setion> ... </section>              <!-- a section that is not-open (aka closed) -->

我在fiddle中进行了处理，但这是一个堆栈代码段

document.querySelectorAll('.accordion > section > button')
    .forEach(function(el) {
        console.log('id:: ' + el.className);
        el.addEventListener('click', function(e) {
            this.parentElement.classList.toggle('open');    // <---
        });
    });

document.querySelectorAll('.accordion > section > button')
    .forEach(function(el) {
        console.log('id:: ' + el.className);
        el.addEventListener('click', function(e) {
            this.parentElement.classList.toggle('open');
        });
    });
.accordion > section > button {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

.accordion > section.open > button,
.accordion > section > button:hover {
    background-color: #ccc; 
}

.accordion > section > .panel {
    padding: 0 18px;
    display: none;
    background-color: white;
    overflow: hidden;
    border: 2px solid #e0e0e0;
    border-top: none;
}
.accordion > section.open > .panel {
    display: block;
}

在现实生活中，我会将CSS和js放在各自独立的文件中。我的页面将在适当的位置包含这些内容。

<h2>Accordion</h2>

<!-- I added classes to the buttons just to see them being found in the browser console. They're not necessary -->

<div class="accordion">
    <section class="open"> <!-- _declared_ as already open -->
        <button id="one">Section 1</button>
        <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>
    </section>

    <section>
        <button id="two">Section 2</button>
        <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>
    </section>

    <section>
        <button id="three">Section 3</button>
        <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>
    </section>
</div>
相关问题
最新问题