javascript - 单击时手风琴标题不起作用

Question

希望有人可以提供帮助。下面是一个javascript手风琴。它在大多数情况下都按照我想要的方式工作。请参阅下面的 JS Fiddle，单击红色背景时会打开手风琴，但是，我需要在单击任何位置（红色和蓝色）时打开它。这可能很简单，但无法弄清楚为什么它不起作用，希望得到一些帮助。

https://jsfiddle.net/xgjmnpt4/

<div class="a-btn" style="background:red">

  <span style="left: 0"></span>

  <div class="row is-vertical-align" style="background:blue">

    <div class="col-4">

      cards
    </div>

    <div class="col-2 text-center">
      1
    </div>

    <div class="col-2 text-center">
      20
    </div>

    <div class="col-2 text-center">
      50
    </div>

    <div class="col-2 text-center">
      100
    </div>

  </div>

</div>

<div class="a-panel">

  <div class="row pb-2">

    Lorem Ipsum 
  </div>

  <div class="row">

    <div class="col-4">

      Card

    </div>

    <div class="col-4">

      cards

    </div>

  </div>

</div>

function initAcc(elem, option){
    document.addEventListener('click', function (e) {
        if (!e.target.matches(elem+' .a-btn')) return;
        else{
            if(!e.target.parentElement.classList.contains('active')){
                if(option==true){
                    var elementList = document.querySelectorAll(elem+' .a-container');
                    Array.prototype.forEach.call(elementList, function (e) {
                        console.log(elementList);
                        e.classList.remove('active');
                    });
                }            
                e.target.parentElement.classList.add('active');
            }else{
                e.target.parentElement.classList.remove('active');
            }
        }
    });
}

initAcc('.accordion', true);

.accordion {
    width: 100%;
    height: auto;
}
.accordion .a-container {
    width: 100%;
    padding-bottom: 5px;
}
.accordion .a-container .a-btn {
    margin: 0;
    position: relative;
    padding: 15px 60px 15px 30px;
    width: 100%;
    color: #191919;
    font-weight: 400;
    display: block;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    border-radius: 0px;
    border: 1px solid rgba(211, 231, 235, 1);
    font-size: 1.6rem;

    font-family: sans-serif;
    color: #333;
}
.accordion .a-container .a-btn span {
    display: block;
    position: absolute;
    pointer-events: none;
    height: 2.4rem;
    width: 2.4rem;
    right: 2rem;
    padding-left: 0.5rem;
    border-radius: 2rem;
    top: 1.8rem;
}
.accordion .a-container .a-btn span:after {
    content: '';
    width: 1.4rem;
    height: 0.3rem;
    border-radius: 0.2rem;
    background-color: #333;
    position: absolute;
    top: 6px;
}
.accordion .a-container .a-btn span:before {
    content: '';
    width: 1.4rem;
    height: 0.3rem;
    border-radius: 0.2rem;
    background-color: #333;
    position: absolute;
    top: 0.6rem;
    transform: rotate(90deg);
    transition: all 0.3s ease-in-out;
}
.accordion .a-container .a-panel {
    width: 100%;
    color: #191919;
    opacity: 0;
    height: 0;
    overflow: hidden;
    padding: 0px 10px;
    border: 1px solid rgba(211, 231, 235, 1);
    border-top: 0;
}
.accordion .a-container.active .a-btn {
    color: #191919;
}
.accordion .a-container.active .a-btn span::before {
    transform: rotate(0deg);
}
.accordion .a-container.active .a-panel {
    padding: 30px;
    opacity: 1;
    height: auto;
}

编辑：Phoenix 作品的以下回答，但不是多个手风琴。如果有人可以提供帮助，那就太好了。

谢谢。

标签： javascripthtml

Answer 1

不要将事件侦听器添加到文档中，而是直接将其添加到按钮中。这也将自动定位按钮的所有子级，让您也可以单击蓝色区域。

我还清理了从容器中添加和删除活动类的方式。无需每次都使用大选择器来从单击的元素定位容器。

片段：

function initAcc(elem, option) {
    var container = document.querySelector(elem + " .a-container");
    var button = container.querySelector(".a-btn");
    
    button.addEventListener('click', function (e) {
      if(!container.classList.contains('active')) {
        if(option==true) {
            container.classList.remove('active');
        }
        container.classList.add('active');
      } else {
        container.classList.remove('active');
      }
    });
}

initAcc('.accordion', true);

 .accordion {
     width: 100%;
     height: auto;
}
 .accordion .a-container {
     width: 100%;
     padding-bottom: 5px;
}
 .accordion .a-container .a-btn {
     margin: 0;
     position: relative;
     padding: 15px 60px 15px 30px;
     width: 100%;
     color: #191919;
     font-weight: 400;
     display: block;
     font-weight: 500;
     cursor: pointer;
     transition: all 0.3s ease-in-out;
     border-radius: 0px;
     border: 1px solid rgba(211, 231, 235, 1);
     font-family: sans-serif;
     color: #333;
}
 .accordion .a-container .a-btn span {
     display: block;
     position: absolute;
     pointer-events: none;
     height: 2.4rem;
     width: 2.4rem;
     right: 2rem;
     padding-left: 0.5rem;
     border-radius: 2rem;
     top: 1.8rem;
}
 .accordion .a-container .a-btn span:after {
     content: '';
     width: 1.4rem;
     height: 0.3rem;
     border-radius: 0.2rem;
     background-color: #333;
     position: absolute;
     top: 6px;
}
 .accordion .a-container .a-btn span:before {
     content: '';
     width: 1.4rem;
     height: 0.3rem;
     border-radius: 0.2rem;
     background-color: #333;
     position: absolute;
     top: 0.6rem;
     transform: rotate(90deg);
     transition: all 0.3s ease-in-out;
}
 .accordion .a-container .a-panel {
     width: 100%;
     color: #191919;
     opacity: 0;
     height: 0;
    /*max-height: 0;
    */
     overflow: hidden;
     padding: 0px 10px;
     border: 1px solid rgba(211, 231, 235, 1);
     border-top: 0;
}
 .accordion .a-container.active .a-btn {
     color: #191919;
}
 .accordion .a-container.active .a-btn span::before {
     transform: rotate(0deg);
}
 .accordion .a-container.active .a-panel {
     padding: 30px;
     opacity: 1;
     height: auto;
}
 

<div class="accordion">


  <div class="a-container">

    <div class="a-btn" style="background:red">

      <span style="left: 0"></span>

      <div class="row is-vertical-align" style="background:blue">

        <div class="col-4">

          cards
        </div>

        <div class="col-2 text-center">
          1
        </div>

        <div class="col-2 text-center">
          20
        </div>

        <div class="col-2 text-center">
          50
        </div>

        <div class="col-2 text-center">
          100
        </div>

      </div>

    </div>

    <div class="a-panel">

      <div class="row pb-2">

        Lorem Ipsum 
      </div>

      <div class="row">

        <div class="col-4">

          Card

        </div>

        <div class="col-4">

          cards

        </div>

      </div>

    </div>

  </div>




</div>