Question

我正在使用jQuery在点击按钮时滑动切换一些内容。这是我的HTML：

 <div class="seasons">
    <div class="container text-center">
     <div class="row margin-top-medium">
        <div class="col-md-12 1">

     <div class="season hvr-shrink">12×01 Chi Cerca Trova</div>
            <div class="content">
             <div class="hvr-shrink">12×01 Chi Cerca Trova</div>
            </div>
    </div>
         <div class="col-md-12">

    <div class="season hvr-shrink">12×02 Il Mini Peter</div>
              <div class="content">
             <div class="hvr-shrink">12×01 Chi Cerca Trova</div>
            </div>
    </div>
         <div class="col-md-12">

    <a href="#"><div class="season hvr-shrink">12×03 Un Quagmire per Quagmire</div></a>
    </div>
    </div> 
    </div>

这是我的剧本：

$(document).ready(function(){
    $(".content").hide();
$(".season").click(function(e){
    $(this).next().slideToggle("fast");

});

});

面板打开它们应该打开，但是当打开面板时，我点击打开另一个面板，前一个面板不会关闭。有没有jQuery代码？谢谢大家的帮助！

Answer 1

文档准备好后，您正在使用.hide（）函数。当用户单击不同的面板标题时，您可以使用相同的功能。

$(document).ready(function(){
    $(".content").hide();
    $(".season").click(function(e){
      var thiz = $(this);     
      if(!thiz.hasClass("opened")){
        $(".content").hide();
        thiz.next().slideToggle("fast");
        $(".season").removeClass("opened");
        thiz.addClass("opened");
      }
    });
});

您可以看到演示：http://codepen.io/ogzhncrt/pen/zGQqwx

打开另一个时，使可折叠面板关闭

1 个答案: