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

我有两个部分，每个部分有3个div，通过滑动切换打开。当1打开时，如何关闭每个分区中的其他2个分区

位置
grjryjj
运动衫
伊格柳伊尔
细节
fykyuk
地点2
grjryjj
球衣2
伊格柳伊尔
细节2
fykyuk

使用JSFIDLE，您可以将所有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();
    }    
});

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

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

---

请看一个例子

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

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

---

JSFIDLE html中的结构将为您提供所需的功能。

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

$( "#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>

$（文档）.ready（函数（）{
$（“部门h2”）。点击（
函数（）{
var thisId=$（this.attr（“id”）；
$（“#”+thisId+t”）.show（“slow”）；
$（this.this（“div”）.not（$（“#“+thisId+“t”））.hide（“slow”）；
});
});

如果你有20个头和块，你会在相同的点击处理程序附近写20个吗？如果“是”，您可以在每个单击处理程序中添加隐藏所有其他元素。如果你不想写这段糟糕的代码，那么是时候使用类来隐藏了。我碰巧有大约60个头和块-不知道其他解决方案，非常欢迎你分享..添加一个类“.active”，它在单击时添加，从所有其他类中删除。“活动”可以用作幻灯片切换的标志，如。唯一“不好”的地方是

.next（）

，但它仍然比成吨的代码好。@tanya只在本地阶段内：。这不会在打开第二个容器时关闭第一个容器。这可能是因为使用了

.sibbines（）

，它只会沿着多米特向下移动，这对我来说是如此。你确定吗？它只在同一个stage div中关闭兄弟节点，正如在原始帖子的评论中所要求的那样。在我清理了HTML之后，工作非常完美——我刚刚去掉了两个div容器，并且在一个主容器下进行了所有切换。谢谢罗宾，这是一个如此优雅的解决方案！对于上面提到的60个头/块，这将是非常好的代码。大约3840行代码。

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