Javascript 打开手风琴并折叠现有手风琴

我已经创建了一个手风琴它的作品很好，唯一的事情，我想是关闭一个已经打开的手风琴，如果另一个手风琴是点击。当前，手风琴分别打开和关闭，但如果另一个打开，我希望当前的手风琴折叠

HTML代码

<ul class="accordion">
    <li><a href="#">Home</a></li>
    <li>
        <a href="#" class="head">Products</a>
        <div class="slide">
            <ul>
                <li><a href="#">Product 1</a></li>
            </ul>
        </div>
    </li>
    <li>
        <a href="#" class="head">Сlients</a>
        <div class="slide">
            <ul>
                <li><a href="#">Product 1</a></li>
                <li><a href="#">Product 2</a></li>
                <li><a href="#">Product 3</a></li>
            </ul>
        </div>
    </li>
    <li>
        <a href="#" class="head">About</a>
        <div class="slide">
            <ul>
                <li><a href="#">Product 1</a></li>
                <li><a href="#">Product 2</a></li>
                <li><a href="#">Product 3</a></li>
            </ul>
        </div>
    </li>
    <li><a href="#">Contact</a></li>
</ul>

JQUERY代码

$(document).ready(function(e) {
    $('.head').on('click', function(){

        //checking if the parent has a class open assigned to it
        if($(this).closest('li').hasClass('open')){

            ///TO CLOSE THE SLIDE//
            $(this).closest('li').find('.slide').animate({'height':0}, 500);
            $(this).closest('li').removeClass('open');  
        }
        else{
            ///TO OPEN THE SLIDE////
            //for dynamic height we ind the ul inside the sliding div and target its height
            var autoHeight = $(this).closest('li').find('.slide ul').height();
            //finding the closest slide in the DOM Tree, so that only that slide will open not all of them
            $(this).closest('li').find('.slide').animate({'height':autoHeight}, 500);
            //finding the closest parent of the clicked item so that only that parent will have the class assigned to it
            $(this).closest('li').addClass('open');     
        }

    });
});

我在jquery代码中添加了注释，以便于理解此注释之前的内容：

///TO OPEN THE SLIDE////

只需添加以下代码：

$("li.open .head").trigger("click");

---

然后，

.open

li

将关闭。

尝试以下操作：您可以设置所有

幻灯片的动画，并将其高度设置为
0
，但单击的幻灯片除外。请参阅下面的代码

$(document).ready(function(e) {
    $('.head').on('click', function(){
       //variable to store clicked slide
        var $slide;
        var $parentLi = $(this).closest('li');
        //checking if the parent has a class open assigned to it
        if($parentLi.hasClass('open')){

            ///TO CLOSE THE SLIDE//
            $slide = $parentLi.find('.slide');
            $slide.animate({'height':0}, 500);
            $parentLi.removeClass('open');  
        }
        else{
            ///TO OPEN THE SLIDE////
            //for dynamic height we ind the ul inside the sliding div and target its height
            var autoHeight = $parentLi.find('.slide ul').height();
            //finding the closest slide in the DOM Tree, so that only that slide will open not all of them
            $slide = $parentLi.find('.slide');
            $slide.animate({'height':autoHeight}, 500);
            //finding the closest parent of the clicked item so that only that parent will have the class assigned to it
            $parentLi.addClass('open');     
        }
        //close all slides except the clicked one
        $('.slide').not($slide).animate({'height':0}, 500);
        $('.head').closest('li').not($parentLi).removeClass('open');
    });
});

与Guedes fix一起，您甚至可以使用jquery slideUp和slideDown来避免动态获取高度，并删除一些css代码以使代码更简单

JS

CSS

“所有其他关闭的都将打开。”AnthonyGrist说。我不这么认为。点击处理程序会说“它是打开的吗？如果是，关闭它。否则，打开它。”如果你在所有的点击处理程序上都触发了点击处理程序，那么这个逻辑将应用于所有的点击处理程序，任何关闭的点击处理程序都会被打开。这就是代码的作用。@AnthonyGrist。我在哪里说的？在你的代码里。你认为
$（“li.open.head”）
选择了什么？它只在第一次工作时起作用，再次工作时，已经打开的手风琴会折叠，但单击的手风琴不会打开。我遇到了问题。我们需要从已打开的所有父类中删除
open
类。我已经更新了我的答案，请看一下。谢谢你的帮助！为什么会有反对票？
$(document).ready(function(e) {
    $('.head').on('click', function(){
       //variable to store clicked slide
        var $slide;
        var $parentLi = $(this).closest('li');
        //checking if the parent has a class open assigned to it
        if($parentLi.hasClass('open')){

            ///TO CLOSE THE SLIDE//
            $slide = $parentLi.find('.slide');
            $slide.animate({'height':0}, 500);
            $parentLi.removeClass('open');  
        }
        else{
            ///TO OPEN THE SLIDE////
            //for dynamic height we ind the ul inside the sliding div and target its height
            var autoHeight = $parentLi.find('.slide ul').height();
            //finding the closest slide in the DOM Tree, so that only that slide will open not all of them
            $slide = $parentLi.find('.slide');
            $slide.animate({'height':autoHeight}, 500);
            //finding the closest parent of the clicked item so that only that parent will have the class assigned to it
            $parentLi.addClass('open');     
        }
        //close all slides except the clicked one
        $('.slide').not($slide).animate({'height':0}, 500);
        $('.head').closest('li').not($parentLi).removeClass('open');
    });
});

$(document).ready(function(e) {
    $('.head').on('click', function(){
        //checking if the parent has a class open assigned to it
        if($(this).closest('li').hasClass('open')){

            ///TO CLOSE THE SLIDE//
            $(this).closest('li').find('.slide').slideUp();
            $(this).closest('li').removeClass('open');  
        }
        else{
            $(this).closest('ul').find("li.open .head").trigger("click");
            ///TO OPEN THE SLIDE////
            //finding the closest slide in the DOM Tree, so that only that slide will open not all of them
            $(this).closest('li').find('.slide').slideDown();
            //finding the closest parent of the clicked item so that only that parent will have the class assigned to it
            $(this).closest('li').addClass('open');     
        }
    });
});

.accordion,
.accordion li .slide ul{
    margin:0;
    padding:0;
    list-style:none;
    overflow:hidden;
}
.accordion li{
    overflow:hidden;
}
.accordion li .slide{
    display: none;
}
.accordion li .slide ul{
    padding:0 0 0 20px;
}