1. 首页
  2. 问题列表
  3. 为什么我的手风琴在点击标题图标时不切换？
提问者：小点点

为什么我的手风琴在点击标题图标时不切换？


需要一些手风琴的帮助。当你点击标题，手风琴下降，这是伟大的，工作良好。但是，当你点击+/-时，手风琴不会下拉。不知道如何解决这个问题，如果有人能帮忙，我会非常感激。不完全确定如何修改前/后，所以它是可点击的。

null

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) {
                        e.classList.remove('active');
                    });
                }            
                e.target.parentElement.classList.add('active');
            }else{
                e.target.parentElement.classList.remove('active');
            }
        }
    });
}

initAcc('.accordion.v1', true);
.container {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 10px 10px 100px 10px;
}
.container h1 {
  text-align: center;
  margin-bottom: 30px;
  font-weight: 500;
}
.container h2 {
  font-weight: 500;
}

.accordion {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
}
.accordion .a-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-bottom: 5px;
}
.accordion .a-container .a-btn {
  margin: 0;
  position: relative;
  padding: 15px 30px;
  width: 100%;
  color: #bdbdbd;
  font-weight: 400;
  display: block;
  font-weight: 500;
  background-color: #262626;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  border-radius: 5px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.1) !important;
}
.accordion .a-container .a-btn span {
  display: block;
  position: absolute;
  height: 14px;
  width: 14px;
  right: 20px;
  top: 18px;
}
.accordion .a-container .a-btn span:after {
  content: "";
  width: 14px;
  height: 3px;
  border-radius: 2px;
  background-color: #fff;
  position: absolute;
  top: 6px;
}
.accordion .a-container .a-btn span:before {
  content: "";
  width: 14px;
  height: 3px;
  border-radius: 2px;
  background-color: #fff;
  position: absolute;
  top: 6px;
  transform: rotate(90deg);
  transition: all 0.3s ease-in-out;
}
.accordion .a-container .a-panel {
  width: 100%;
  color: #262626;
  transition: all 0.2s ease-in-out;
  opacity: 0;
  height: auto;
  max-height: 0;
  overflow: hidden;
  padding: 0px 10px;
}
.accordion .a-container.active .a-btn {
  color: #fff;
}
.accordion .a-container.active .a-btn span::before {
  transform: rotate(0deg);
}
.accordion .a-container.active .a-panel {
  padding: 15px 10px 10px 10px;
  opacity: 1;
  max-height: 500px;
}
    <div class="container">
        <div class="accordion v1">
            <div class="a-container">
                <p class="a-btn">One <span></span></p>
                <div class="a-panel">
                    <h4>Lorem ipsum dolor sit amet.</h4>
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laudantium minima dolores assumenda id. Porro consequuntur at dolor eum, neque labore!</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur non sint sequi ipsa laudantium, iure rem vel nemo soluta temporibus, consectetur at corrupti aspernatur maxime, iusto ne blanditiis deleniti.</p>
                </div>
            </div>
            <div class="a-container">
                <p class="a-btn">Two <span></span></p>
                <div class="a-panel">
                    <h4>Lorem ipsum dolor sit amet.</h4>
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laudantium minima dolores assumenda id. Porro consequuntur at dolor eum, neque labore!</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur non sint sequi ipsa laudantium, iure rem vel nemo soluta temporibus, consectetur at corrupti aspernatur maxime, iusto ne blanditiis deleniti.</p>
                </div>
            </div>
        </div>
    </div>

null


共2个答案

匿名用户

将指针-events:none添加到span中，将对您起作用，如下所示：-

null

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) {
                        e.classList.remove('active');
                    });
                }            
                e.target.parentElement.classList.add('active');
            }else{
                e.target.parentElement.classList.remove('active');
            }
        }
    });
}

initAcc('.accordion.v1', true);
.container {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 10px 10px 100px 10px;
}
.container h1 {
  text-align: center;
  margin-bottom: 30px;
  font-weight: 500;
}
.container h2 {
  font-weight: 500;
}

.accordion {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
}
.accordion .a-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-bottom: 5px;
}
.accordion .a-container .a-btn {
  margin: 0;
  position: relative;
  padding: 15px 30px;
  width: 100%;
  color: #bdbdbd;
  font-weight: 400;
  display: block;
  font-weight: 500;
  background-color: #262626;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  border-radius: 5px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.1) !important;
}
.accordion .a-container .a-btn span {
  display: block;
  position: absolute;
  pointer-events:none;
  height: 14px;
  width: 14px;
  right: 20px;
  top: 18px;
}
.accordion .a-container .a-btn span:after {
  content: "";
  width: 14px;
  height: 3px;
  border-radius: 2px;
  background-color: #fff;
  position: absolute;
  top: 6px;
}
.accordion .a-container .a-btn span:before {
  content: "";
  width: 14px;
  height: 3px;
  border-radius: 2px;
  background-color: #fff;
  position: absolute;
  top: 6px;
  transform: rotate(90deg);
  transition: all 0.3s ease-in-out;
}
.accordion .a-container .a-panel {
  width: 100%;
  color: #262626;
  transition: all 0.2s ease-in-out;
  opacity: 0;
  height: auto;
  max-height: 0;
  overflow: hidden;
  padding: 0px 10px;
}
.accordion .a-container.active .a-btn {
  color: #fff;
}
.accordion .a-container.active .a-btn span::before {
  transform: rotate(0deg);
}
.accordion .a-container.active .a-panel {
  padding: 15px 10px 10px 10px;
  opacity: 1;
  max-height: 500px;
}
<div class="container">
        <div class="accordion v1">
            <div class="a-container">
                <p class="a-btn">One <span></span></p>
                <div class="a-panel">
                    <h4>Lorem ipsum dolor sit amet.</h4>
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laudantium minima dolores assumenda id. Porro consequuntur at dolor eum, neque labore!</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur non sint sequi ipsa laudantium, iure rem vel nemo soluta temporibus, consectetur at corrupti aspernatur maxime, iusto ne blanditiis deleniti.</p>
                </div>
            </div>
            <div class="a-container">
                <p class="a-btn">Two <span></span></p>
                <div class="a-panel">
                    <h4>Lorem ipsum dolor sit amet.</h4>
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laudantium minima dolores assumenda id. Porro consequuntur at dolor eum, neque labore!</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur non sint sequi ipsa laudantium, iure rem vel nemo soluta temporibus, consectetur at corrupti aspernatur maxime, iusto ne blanditiis deleniti.</p>
                </div>
            </div>
        </div>
    </div>

匿名用户

目标就是你点击的东西。+不是你要找的元素，所以你得看看它是不是子元素。最简单的方法就是最近。

null

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

initAcc('.accordion.v1', true);
.container {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 10px 10px 100px 10px;
}
.container h1 {
  text-align: center;
  margin-bottom: 30px;
  font-weight: 500;
}
.container h2 {
  font-weight: 500;
}

.accordion {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
}
.accordion .a-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-bottom: 5px;
}
.accordion .a-container .a-btn {
  margin: 0;
  position: relative;
  padding: 15px 30px;
  width: 100%;
  color: #bdbdbd;
  font-weight: 400;
  display: block;
  font-weight: 500;
  background-color: #262626;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  border-radius: 5px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.1) !important;
}
.accordion .a-container .a-btn span {
  display: block;
  position: absolute;
  height: 14px;
  width: 14px;
  right: 20px;
  top: 18px;
}
.accordion .a-container .a-btn span:after {
  content: "";
  width: 14px;
  height: 3px;
  border-radius: 2px;
  background-color: #fff;
  position: absolute;
  top: 6px;
}
.accordion .a-container .a-btn span:before {
  content: "";
  width: 14px;
  height: 3px;
  border-radius: 2px;
  background-color: #fff;
  position: absolute;
  top: 6px;
  transform: rotate(90deg);
  transition: all 0.3s ease-in-out;
}
.accordion .a-container .a-panel {
  width: 100%;
  color: #262626;
  transition: all 0.2s ease-in-out;
  opacity: 0;
  height: auto;
  max-height: 0;
  overflow: hidden;
  padding: 0px 10px;
}
.accordion .a-container.active .a-btn {
  color: #fff;
}
.accordion .a-container.active .a-btn span::before {
  transform: rotate(0deg);
}
.accordion .a-container.active .a-panel {
  padding: 15px 10px 10px 10px;
  opacity: 1;
  max-height: 500px;
}
<div class="container">
        <div class="accordion v1">
            <div class="a-container">
                <p class="a-btn">One <span></span></p>
                <div class="a-panel">
                    <h4>Lorem ipsum dolor sit amet.</h4>
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laudantium minima dolores assumenda id. Porro consequuntur at dolor eum, neque labore!</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur non sint sequi ipsa laudantium, iure rem vel nemo soluta temporibus, consectetur at corrupti aspernatur maxime, iusto ne blanditiis deleniti.</p>
                </div>
            </div>
            <div class="a-container">
                <p class="a-btn">Two <span></span></p>
                <div class="a-panel">
                    <h4>Lorem ipsum dolor sit amet.</h4>
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laudantium minima dolores assumenda id. Porro consequuntur at dolor eum, neque labore!</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur non sint sequi ipsa laudantium, iure rem vel nemo soluta temporibus, consectetur at corrupti aspernatur maxime, iusto ne blanditiis deleniti.</p>
                </div>
            </div>
        </div>
    </div>

相关问题



热门标签
Java JavaScript Python PHP C# Android Html jQuery C++ Css IOS MySQL NodeJS