Question

我创造了一种手风琴它工作得很好，我想要的唯一一件事就是如果点击另一支手风琴就关闭已经开放的手风琴。目前，手风琴分开打开和关闭，但如果另一个打开，我希望当前的手风琴崩溃

HTML CODE

<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>

CSS代码

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

JQUERY CODE

$(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代码中添加了注释，以便于理解

Answer 1

试试这个：您可以设置动画并将所有slide的高度设置为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');
    });
});

<强> JSFiddle Demo

Answer 2

在此评论之前：

///TO OPEN THE SLIDE////

只需添加以下代码：

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

然后.open li将关闭。

Answer 3

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

JS

$(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');     
        }
    });
});

CSS

.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;
}

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

3 个答案: