javascript - 加/减 Accordion 列表

Question

我在下面有 Accordion 列表的代码。打开和关闭列表时，如何在标题左 Angular 获得加号和减号，而不更改文本的位置？任何帮助，干杯。

(function () {
  var accordions, i;
  
  // Make sure the browser supports what we are about to do.
  if (!document.querySelectorAll || !document.body.classList) return;
  
  // Using a function helps isolate each accordion from the others
  function makeAccordion(accordion) {
    var targets, currentTarget, i;
    targets = accordion.querySelectorAll('.accordion > * >h1 ');
    for(i = 0; i < targets.length; i++) {
      targets[i].addEventListener('click', function (e) {
      /*Added the code below*/
        if (e.target.parentNode.classList.contains("expanded")) {
          e.target.parentNode.classList.remove("expanded")
        } else {
        /*Else do the following, same as before */
        if (currentTarget) 
          currentTarget.classList.remove('expanded');
        
        currentTarget = this.parentNode;
        currentTarget.classList.add('expanded');
        }
      }, false);
    }

    accordion.classList.add('js');
  }

  // Find all the accordions to enable
  accordions = document.querySelectorAll('.accordion');
  console.log(accordions);
  
  // Array functions don't apply well to NodeLists
  for(i = 0; i < accordions.length; i++) {
    makeAccordion(accordions[i]);
  }
  
})();
  

/*All paragraphs*/

.p {
  margin: 5px;
  color: #007a5e;
}

.bold {
  color: #007a5e;
  font-weight:bold;
  }
  
  .boldwhite {
  font-weight:bold;
  }

/*Accordion Movement*/

.accordion.js > * {
  overflow: hidden;
}

.accordion.js > *:not(.expanded) > *:not(h1) {
  max-height: 0;
  margin-top: 0;
  margin-bottom: 0;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
}

.accordion.js > .expanded > *:not(h1) {
  opacity: 1;
  visibility: visible;
}

.accordion.js > * > h1 {
  cursor: pointer;
  visibility: visible;
}

.accordion.js > * > *:not(h1) {
  transition: max-height 0.5s, visibility 0.5s, margin 0.5s, opacity 0.5s;
}


/*Section Properties*/

.sections {
  font-family: Verdana;
  font-weight: lighter;
  color: #5E5E5E;
  text-align: center;
  border-style: solid;
  border-width: 1px;
  border-color: #dddddd;
  padding: 5px;
  background-color: #FCFCFC;
  border-radius: 1px;
}

.sections:hover {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  -o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}


/*Green Section Properties*/

.sections2 {
  font-family: Verdana;
  font-weight: lighter;
  color: #5E5E5E;
  text-align: center;
  border-style: solid;
  border-width: 1px;
  border-color: #ccd6e0;
  padding: 5px;
  background-color:rgba(224, 235, 245,0.3);
  border-radius: 1px;
}

.sections2:hover {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  -o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.accordion > section > div {
  margin-bottom: 15px;
}
  

<section class="accordion js"><section class="sections">
      <h1> 
         <span style="font-size: 18px;">1</span></h1>
      <div>
         <br/>
         <p id="p">One</p>
      </div> </section>
   <br style="line-height: 15px;"/><section class="sections2">
      <h1>
         <span style="font-size: 18px;">2</span></h1>
      <div>
         <br/>
        <p id="p">Two</p>
      </div> 
  </section>

Answer 1

您必须添加 <span class="chevrone"></span>每个 h1 ，并包括 css，我在下面添加了。请注意，不需要额外的 javascript。

额外的 CSS

.accordion.js .chevrone {
    position: absolute;
    left: 30px;
}

.accordion.js > *:not(.expanded) .chevrone:before {
    content: '+';
}

.accordion.js >.expanded .chevrone:before {
    content: '-';
}

修改后的代码段

(function () {
  var accordions, i;
  
  // Make sure the browser supports what we are about to do.
  if (!document.querySelectorAll || !document.body.classList) return;
  
  // Using a function helps isolate each accordion from the others
  function makeAccordion(accordion) {
    var targets, currentTarget, i;
    targets = accordion.querySelectorAll('.accordion > * >h1 ');
    for(i = 0; i < targets.length; i++) {
      targets[i].addEventListener('click', function (e) {
      /*Added the code below*/
        
        if (e.target.parentNode.classList.contains("expanded")) {
          e.target.parentNode.classList.remove("expanded")
        } else {
        /*Else do the following, same as before */
        if (currentTarget) 
          currentTarget.classList.remove('expanded');
        
        currentTarget = this.parentNode;
        currentTarget.classList.add('expanded');
        }
      }, false);
    }

    accordion.classList.add('js');
  }

  // Find all the accordions to enable
  accordions = document.querySelectorAll('.accordion');
  console.log(accordions);
  
  // Array functions don't apply well to NodeLists
  for(i = 0; i < accordions.length; i++) {
    makeAccordion(accordions[i]);
  }
  
})();

/*All paragraphs*/

.p {
  margin: 5px;
  color: #007a5e;
}

.bold {
  color: #007a5e;
  font-weight:bold;
  }
  
  .boldwhite {
  font-weight:bold;
  }

/*Accordion Movement*/

.accordion h1 {
  width:100%;
}

.accordion.js .chevrone {
    position: absolute;
    left: 30px;
}

.accordion.js > *:not(.expanded) .chevrone:before {
    content: '+';
}

.accordion.js >.expanded .chevrone:before {
    content: '-';
}

.accordion.js > * {
  overflow: hidden;
}

.accordion.js > *:not(.expanded) > *:not(h1) {
  max-height: 0;
  margin-top: 0;
  margin-bottom: 0;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
}

.accordion.js > .expanded > *:not(h1) {
  opacity: 1;
  visibility: visible;
}

.accordion.js > * > h1 {
  cursor: pointer;
  visibility: visible;
}

.accordion.js > * > *:not(h1) {
  transition: max-height 0.5s, visibility 0.5s, margin 0.5s, opacity 0.5s;
}


/*Section Properties*/

.sections {
  font-family: Verdana;
  font-weight: lighter;
  color: #5E5E5E;
  text-align: center;
  border-style: solid;
  border-width: 1px;
  border-color: #dddddd;
  padding: 5px;
  background-color: #FCFCFC;
  border-radius: 1px;
}

.sections:hover {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  -o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}


/*Green Section Properties*/

.sections2 {
  font-family: Verdana;
  font-weight: lighter;
  color: #5E5E5E;
  text-align: center;
  border-style: solid;
  border-width: 1px;
  border-color: #ccd6e0;
  padding: 5px;
  background-color:rgba(224, 235, 245,0.3);
  border-radius: 1px;
}

.sections2:hover {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  -o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.accordion > section > div {
  margin-bottom: 15px;
}

<section class="accordion js"><section class="sections">
      <h1> 
         <span class="chevrone" ></span>
         <span style="font-size: 18px;">1</span></h1>
      <div>
         <br/>
         <p id="p">One</p>
      </div> </section>
   <br style="line-height: 15px;"/><section class="sections2">
      <h1>
         <span class="chevrone" ></span>
         <span style="font-size: 18px;">2</span></h1>
      <div>
         <br/>
        <p id="p">Two</p>
      </div> 
  </section>