Question

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

   <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();
    }    
});

见this jsFiddle。当您单击标题时，这会隐藏同一阶段内的内容，假设您在整个html代码中遵循相同的命名约定。

但是，如果可以的话，我会建议你稍微清理一下你的HTML。

查看this 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结构，ID与您在示例代码中指定的格式相同，代码将非常有用。

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

jQuery .slideToggle（）也关闭其他选项卡

2 个答案: