如果第二次单击，如何折叠当前选项卡？

Question

第一次在这个网站上发帖:)

我发现这段代码几乎就是我要找的，但如果当前选项卡再次单击，我希望选项卡菜单完全关闭。

我对 javascript 或 jQuery 不是很有经验，不知道如何解决这个问题。

感谢您的帮助！

最好的问候，

试试

$(function() {

    $('.tab-panels .tabs li').on('click', function() {

        var $panel = $(this).closest('.tab-panels');

        $panel.find('.tabs li.active').removeClass('active');
        $(this).addClass('active');

        //figure out which panel to show
        var panelToShow = $(this).attr('rel');

        //hide current panel
        $panel.find('.panel.active').slideUp(300, showNextPanel);

        //show next panel
        function showNextPanel() {
            $(this).removeClass('active');

            $('#'+panelToShow).slideDown(300, function() {
                $(this).addClass('active');
            });
        }
    });


});

body {
    background: #fafafa;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #333;
}


.tab-panels ul {
    margin: 0;
    padding: 0;
}
.tab-panels ul li {
    list-style-type: none;
    display: inline-block;
    background: #999;
    margin: 0;
    padding: 3px 10px;
    border-radius: 10px 10px 0 0;
    color: #fff;
    font-weight: 200;
    cursor: pointer;

}
.tab-panels ul li:hover {
    color: #fff;
    background: #666;
}

.tab-panels ul li.active {
    color: #fff;
    background: #666;
}

.tab-panels .panel {
    display:none;
    background: #c9c9c9;
    padding: 30px;
    border-radius: 0 0 10px 10px;
}

.tab-panels .panel.active {
    display:block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab-panels">
            <ul class="tabs">
                <li rel="panel1" class="active">panel1</li>
                <li rel="panel2">panel2</li>
                <li rel="panel3">panel3</li>
                <li rel="panel4">panel4</li>
            </ul>

            <div id="panel1" class="panel active">
                content1<br/>
                content1<br/>
                content1<br/>
                content1<br/>
                content1<br/>
            </div>
            <div id="panel2" class="panel">
                content2<br/>
                content2<br/>
                content2<br/>
                content2<br/>
                content2<br/>
            </div>
            <div id="panel3" class="panel">
                content3<br/>
                content3<br/>
                content3<br/>
                content3<br/>
                content3<br/>
            </div>
            <div id="panel4" class="panel">
                content4<br/>
                content4<br/>
                content4<br/>
                content4<br/>
                content4<br/>
            </div>
        </div>

Answer 1

尝试使用 slideToggle()

$('#'+panelToShow).slideToggle(800).addClass('active');

https://codepen.io/anon/pen/LQVQga

希望对你有帮助