在第二次单击时隐藏折叠式面板

Question

嘿，伙计们，我设置了下面的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效果**

谢谢。

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

            });

        });

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

​