jQuery .slideToggle()也关闭其他选项卡

Question

我有两个部分，每个部分有3个div，在slideToggle上打开。当1打开时，如何关闭每个部分中的其他2个div？

https://jsfiddle.net/koteva/mdx20uqe/2/

   <div id="stage1">

   <h2 id="location-1">Location</h2>
   <div id="location-1t">grjryjj</div>              

   <h2 id="jersey-1">JERSEY </h2>
   <div id="jersey-1t" style="display: none;">  ighlgkiuluil   </div>

   <h2 id="details-1">details</h2>
   <div id="details-1t" style="display: none;">fykyuk    </div>

   </div>           

   <div id="stage2">

   <h2 id="location-2">Location2</h2>
   <div id="location-2t">grjryjj</div>              

   <h2 id="jersey-2">JERSEY2 </h2>
   <div id="jersey-2t" style="display: none;">  ighlgkiuluil    </div>

   <h2 id="details-2">details2</h2>
   <div id="details-2t" style="display: none;">fykyuk   </div>

   </div>

Answer 1

使用jsFiddle，您可以将所有js代码替换为

$('h2').click(function(event){
    var $this = $(event.target),
        id = $this.attr('id');

    if($('#'+id+'t').is(':visible')){ // To not slide up and down if clicking an already open element.
        $this.parent().children('div').slideUp();
    } else {
        $this.parent().children('div').slideUp();
        $('#'+id+'t').slideToggle();
    }    
});

正如在这个jsFiddle中所看到的。当您在整个html代码中遵循相同的命名约定时，当您单击一个标头时，这会在同一阶段隐藏内容。

不过，如果可以的话，我建议您稍微清理一下html。

以这个jsFiddle为例。

除非您的代码必须有当前的结构，否则我建议将其重构为使用类似的类，这样就能够编写更干净的代码。

$('.header').click(function(event){
    var $this = $(event.target);
    $this.siblings().slideToggle();
    $this.parent().siblings().children('.content').slideUp();
});

使用jsFiddle html中的结构将为您提供所需的功能。

Answer 2

如果你想用简单的方式来做的话。你可以这样做。只写了一个函数。但是它很简单，代码行也会增加。

$( "#details-2" ).click(function() {    
     $( "#location-2t").hide( "slow");
     $( "#jersey-2t").hide( "slow");
     $("#details-2t").show("slow");
});

对于更复杂的div结构和Ids，其格式与您在示例代码中指定的格式相同，下面的代码将非常有用。

  <script>
  $(document).ready(function(){
    $("div h2").click(  
        function() {        
            var thisId = $(this).attr("id");
            $("#"+thisId+"t").show("slow");    
            $(this).siblings("div").not($("#"+thisId+"t")).hide("slow");
        });
    });
  </script>