第二次点击隐藏手风琴式面板答案

【问题标题】：Hiding an accordion type panel on second click第二次点击隐藏手风琴式面板
【发布时间】：2015-03-30 17:15:22
【问题描述】：

大家好，我设置了以下 jquery：

$(document).ready(function(){
    $('.tab-panels .tabs li').click(function(){
        var panel = $(this).closest('.tab-panels');

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

        var panelToShow = $(this).attr('rel');

        panel.find('.panel.active').slideUp(500, nextPanel);

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

        });

    });

http://jsfiddle.net/x1zw352t/4/

因此，当您单击展开面板时，当前展开的面板会关闭并出现新的面板。如果您单击同一个，它只会向上滑动，然后再向下滑动。

如果我第二次单击关联的链接并创建更多的切换效果，如何才能关闭同一面板？

** 如果点击不同的标签，它仍然需要删除当前标签并替换为不同的标签，而不仅仅是简单的slideToggle效果*

谢谢。

【问题讨论】：

标签： jquery accordion

【解决方案1】：

调用 nextpanel()

   $(document).ready(function(){
        $('.tab-panels .tabs li').click(function(){
            var panel = $(this).closest('.tab-panels');

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

            var panelToShow = $(this).attr('rel');

            **panel.find('.panel.active').slideUp(500, nextPanel());**

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

            });

        });

【讨论】：

这似乎可以做到，但是当您多次单击同一个时，它就会开始滑入和滑出。

【解决方案2】：

试试这个代码：

$(document).ready(function(){
    $('.tab-panels .tabs li').click(function(){
		var panel = $(this).attr('rel')
        //$('.panel').slideUp();
		$('#'+panel).slideToggle();
		
    });    
    });

<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">panel1<div id="students-btn" class="panel-btn"></div></li>
						<li rel="panel2">panel2<div id="parents-btn" class="panel-btn"></div></li>
						<li rel="panel3">panel3<div id="faculty-btn" class="panel-btn"></div></li>
						<li rel="panel4">panel4<div id="schools-btn" class="panel-btn"></div></li>
					</ul>
				

					<div id="panel1" class="panel active">
						Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident unde aspernatur repellendus inventore quo eum voluptates et quis assumenda debitis totam reiciendis? Libero molestiae modi officia voluptatibus reprehenderit nam debitis.
					</div>
    
    					<div id="panel2" class="panel">
						Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident unde aspernatur repellendus inventore quo eum voluptates et quis assumenda debitis totam reiciendis? Libero molestiae modi officia voluptatibus reprehenderit nam debitis.
					</div>
    
    					<div id="panel3" class="panel">
						Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident unde aspernatur repellendus inventore quo eum voluptates et quis assumenda debitis totam reiciendis? Libero molestiae modi officia voluptatibus reprehenderit nam debitis.
					</div>
    
    					<div id="panel4" class="panel">
						Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident unde aspernatur repellendus inventore quo eum voluptates et quis assumenda debitis totam reiciendis? Libero molestiae modi officia voluptatibus reprehenderit nam debitis.
					</div>

或者试试这个：

$(document).ready(function(){
    $('.tab-panels .tabs li').click(function(){
		var panel = $(this).attr('rel')
        $('.panel').slideUp();
		$('#'+panel).slideToggle();
		
    });    
    });

<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">panel1<div id="students-btn" class="panel-btn"></div></li>
						<li rel="panel2">panel2<div id="parents-btn" class="panel-btn"></div></li>
						<li rel="panel3">panel3<div id="faculty-btn" class="panel-btn"></div></li>
						<li rel="panel4">panel4<div id="schools-btn" class="panel-btn"></div></li>
					</ul>
				

					<div id="panel1" class="panel active">
						Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident unde aspernatur repellendus inventore quo eum voluptates et quis assumenda debitis totam reiciendis? Libero molestiae modi officia voluptatibus reprehenderit nam debitis.
					</div>
    
    					<div id="panel2" class="panel">
						Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident unde aspernatur repellendus inventore quo eum voluptates et quis assumenda debitis totam reiciendis? Libero molestiae modi officia voluptatibus reprehenderit nam debitis.
					</div>
    
    					<div id="panel3" class="panel">
						Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident unde aspernatur repellendus inventore quo eum voluptates et quis assumenda debitis totam reiciendis? Libero molestiae modi officia voluptatibus reprehenderit nam debitis.
					</div>
    
    					<div id="panel4" class="panel">
						Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident unde aspernatur repellendus inventore quo eum voluptates et quis assumenda debitis totam reiciendis? Libero molestiae modi officia voluptatibus reprehenderit nam debitis.
					</div>

【讨论】：