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

试试这段代码：

＆＃13;

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

＆＃13;

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

＆＃13;

或试试这个：

＆＃13;

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

＆＃13;

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

＆＃13;

第二次点击隐藏手风琴类型面板

2 个答案: