Question

实际上我已经使用bootstrap类实现了Accordion当我们点击More Info时它工作正常。但是如果我点击下一个手风琴文本，第一个应该自动关闭。任何人都可以帮我这个。谢谢提前。

HTML：

<div class="accordion" >More Info</div>
                    <div class="panel">
        <p>            
        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 class="accordion" >More Info</div>
                    <div class="panel">
        <p>            
        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>

CSS：

div.panel {
padding: 0 18px;
display: none;
background-color: white;
border: 1px solid #d4d4d4;
 }

     div.panel.show {
display: block;
color: #2b3034;
font-size: 12px;
font-family: Roboto,sans-serif;
margin-left: -18px;
border-radius: 0px;
width: 778px;
margin-top: 16px;
background: #ffffff;
margin-bottom: -17px;
              }

使用Javascript：

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

JSFiddle

Answer 1

由于您已标记Jquery标记，因此请添加$(".panel").removeClass("show");

for (i = 0; i < acc.length; i++) {
        acc[i].onclick = function(){

            $(".panel").removeClass("show");
            this.classList.toggle("active");
            this.nextElementSibling.classList.toggle("show");
      }
    }

<强> Working Demo

Answer 2

在你的代码中你选择了基于类名的手风琴，还有一件事情，它不是一个正确的过程，你应该根据单独的ID选择那个项目然后它将完美地运作。

Answer 3

一种方法可能是追踪以前扩展的手风琴，例如：

var currentActive; // track the current active accordion.

并在另一个展开时关闭它，

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);  //Close the current accordion.
        }
        toggleAccordionState(this);
        currentActive = this;     // Save the current open accordion   
  }

请参阅updated fiddle

Answer 4

你可以通过做一些简单的事情来解决这个问题：

这里是小提琴http://jsfiddle.net/mveau1v4/5/

var acc = jQuery(".accordion");

acc.on("click", function(){
    //remove status from past elements
    $(".show").removeClass("show");
    $(".active").removeClass("active");
    //add new status to the clicked element.
    $(this).addClass("active");
    $(this).next(".panel").addClass("show");
})

Answer 5

我认为通过调整HTML有更好的方法，以便我们可以将扩展逻辑移动到CSS。这将减少JS上的一个调用。无论如何，为了帮助您了解它的工作原理，我根据我们的风格更新了您的JS。希望它有所帮助。

// snip
this.sampleData = base_string;
var dataToSend = this.sampleData.substring( 0, 2000000 );

function sendRequest (){
    var xhr = new XMLHttpRequest();
    xhr.upload.addEventListener('load', function (e) {
        sendRequest ();
    });

    xhr.open("POST", "http://localhost/upload.php" + "?n=" +  Math.random(), true);
    xhr.send(dataToSend);
}
sendRequest ();

working fiddle

Answer 6

这是另一个适合我的版本。希望其他人可以使用它。

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
        panel.style.maxHeight = null;  // Collapse clicked panel
    } 
    else { // expand clicked panel
        panel.style.maxHeight = panel.scrollHeight + "px";
        collapseOthers(this);
    } 
    }
}

// Collapse all other accordions except the clicked one
function collapseOthers(clickedAccor) {
    var accs = document.getElementsByClassName("accordion");
    for (var i = 0; i < accs.length; i++) {
        if (accs[i] != clickedAccor) {
           accs[i].nextElementSibling.style.maxHeight = null;
        }
    }
}

如何在打开另一个手风琴文本之前关闭手风琴元素

6 个答案: