javascript - 如何使用 html、css 和 javascript 创建 Accordion。这样一次打开一个，当打开第一个页面时，默认情况下应该打开一个

Question

我使用以下代码创建了一个手风琴 -

HTML：

<button class="accordion">C/C++</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">JAVA</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>

CSS：

.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;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

JavaScript：

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.maxHeight) {
            panel.style.maxHeight = null;
        } else {
            panel.style.maxHeight = panel.scrollHeight + "px";
        } 
    });
}

它给出这样的输出 -

但是我想在默认情况下打开页面时应该打开第一个，并且一次只能打开一个。像这样 -

并且应该有+符号最后打开它关闭并且-当它打开时。

标签： javascripthtmlcss

Answer 1

尝试运行代码片段。您可能需要更改 CSS 样式。

[name="accordion-group"]{
  	display: none;
}
.element-list{
  margin-left: 0;
  padding-left: 0;
  list-style-type: none;
}
.accordion-group label{
	  color: #666;
	  cursor: pointer;
}
.accordion-group label:hover{
  	color: #C85A17;
}
.accordion-toggle:before{
  	content: "▶ ";
}
.accordion-toggle::before{
	  content: "▶ ";
}
[name="accordion-group"] ~ .accordion-h .accordion-toggle{
  	display: block;
}
[name="accordion-group"]:checked ~ .accordion-h .accordion-toggle{
	  display: none;
}
.accordion-dismiss:before{
	  content: "▼ " !important;
}
.accordion-dismiss::before{
	  content: "▼ " !important;
}
[name="accordion-group"] ~ h4 .accordion-dismiss{
	  display: none;
}
[name="accordion-group"]:checked ~ h4 .accordion-dismiss{
	  display: block;
}
.accordion-body{
	  border-bottom: 1px solid #CC6600;
	  height: auto;
	  max-height: 0;
	  overflow: hidden;
	  background-color: hsla(0, 0%, 100%, .25);
	  box-shadow: 0 2px 2px #CC6600 inset;
	  -webkit-transition: max-height .2s ease 0s;
	  transition: max-height .25s ease 0s;
}
.accordion-group li:last-child .accordion-body{
  	border-bottom-width: 1;
}
[name="accordion-group"]:checked ~ .accordion-body{
	  max-height: 660px;
	  transition-duration: .75s;
}
.accordion-inner{
  padding: 0.631100639515315em 2%; 
}

<div>
  <input checked="checked" id="collapse-all" name="accordion-group" type="radio" />
  <ul class="accordion-group element-list">
    <li>
      <input id="collapse-1" name="accordion-group" type="radio" checked/>
      <h4 class="accordion-h">
        <label class="accordion-dismiss" for="collapse-all">C++</label>
        <label class="accordion-toggle" for="collapse-1">C++</label>
      </h4>
      <div class="accordion-body">
        <div class="accordion-inner">
          <span>Content</span></p>
        </div>
      </div>
    </li>

    <li>
      <input id="collapse-2" name="accordion-group" type="radio" />
      <h4 class="accordion-h">
        <label class="accordion-dismiss" for="collapse-all">JAVA</label>
        <label class="accordion-toggle" for="collapse-2">JAVA</label>
      </h4>
      <div class="accordion-body">
        <div class="accordion-inner">
          Content
        </div>
      </div>
    </li>
  </ul>
</div>