Question

您好，在我的网站上我有一个工作门户页面，我使用jquery手风琴打开和关闭所发布作业的详细信息。当我点击更多信息按钮时，手风琴选项卡正在扩展但是当我点击时更多信息按钮它没有关闭，只有第一个它向下打开，其余它向上打开。我的代码。

<div class="digitalmarketingassociate">
                  <span class="digit">Digital Marketing Associate</span>
                  <div class="applynow">Apply Now</div>
                  <div class="moreinfo accordion" >More Info</div>
                    <div class="panel">
                        <p class="jobdes">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
                </div>                    
                </div> 
                <div class="juniorqaengineer">
                  <span class="digit">Junior QA Engineer</span>
                  <div class="applynow">Apply Now</div>
                  <div class="moreinfo accordion1">More Info</div>
                  <div class="panel">
                        <p class="jobdes">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
                    </div>                
                </div>              
                <div class="junioriosdeveloper">
                  <span class="digit">Junior iOS Developer</span>
                  <div class="applynow">Apply Now</div>
                  <div class="moreinfo accordion2">More Info</div>
                  <div class="panel">
                        <p class="jobdes">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>                               
                    </div>            
                </div>

Jquery的：

var acc = document.getElementsByClassName("accordion");
var i;
var currentActive;
var toggleAccordionState = function(accordion) {
        accordion.classList.toggle("active");
  accordion.nextElementSibling.classList.toggle("show");
};

for (i = 0; i < acc.length; i++) {
acc[i].onclick = function(){
    if(currentActive) {
            toggleAccordionState(currentActive);
    }
    toggleAccordionState(this);
    currentActive = this;        
 }
 }
 var acc = document.getElementsByClassName("accordion1");
 var i;
 var currentActive;
 var toggleAccordionState = function(accordion) {
        accordion.classList.toggle("active");
  accordion.nextElementSibling.classList.toggle("show");
 };

for (i = 0; i < acc.length; i++) {
acc[i].onclick = function(){
    if(currentActive) {
            toggleAccordionState(currentActive);
    }
    toggleAccordionState(this);
    currentActive = this;        
  }
  }
  var acc = document.getElementsByClassName("accordion2");
  var i;
  var currentActive;
  var toggleAccordionState = function(accordion) {
        accordion.classList.toggle("active");
  accordion.nextElementSibling.classList.toggle("show");
  };

 for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function(){
    if(currentActive) {
            toggleAccordionState(currentActive);
    }
    toggleAccordionState(this);
    currentActive = this;        
   }
   }

Answer 1

首先，使用名为class的单个accordion，如下所示：<div class="moreinfo accordion">More Info</div>。它有助于编写更有效和易于理解的内容。 Javascript代码如下所示：

var acc = document.getElementsByClassName("accordion");
for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function(){
       this.classList.toggle("active");
       this.nextElementSibling.classList.toggle("show");
    }
}

HTML代码

<div class="digitalmarketingassociate">
              <span class="digit">Digital Marketing Associate</span>
              <div class="applynow">Apply Now</div>
              <div class="moreinfo accordion" >More Info</div>
                <div class="panel">
                    <p class="jobdes">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
            </div>                    
            </div> 
            <div class="juniorqaengineer">
              <span class="digit">Junior QA Engineer</span>
              <div class="applynow">Apply Now</div>
              <div class="moreinfo accordion">More Info</div>
              <div class="panel">
                    <p class="jobdes">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
                </div>                
            </div>              
            <div class="junioriosdeveloper">
              <span class="digit">Junior iOS Developer</span>
              <div class="applynow">Apply Now</div>
              <div class="moreinfo accordion">More Info</div>
              <div class="panel">
                    <p class="jobdes">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>                               
                </div>            
            </div>
</div>

此外，使用名为.show

的样式类

.show {
    display: none;
}

这是一个有效的solution

Jquery Accordion选项卡不会关闭按钮

1 个答案: