关闭所有其他DIV和隐藏DIV的位置

Question

我创建了一个简单的两步手风琴： http : //jsfiddle.net/oampz/WkuMg/1/

我想知道的是，我是否使用正确的jQuery以确保单击heading DIV时，将扩展以下content DIV并关闭所有其他content DIV。

jQuery的：

$(".heading").click(function () {
  var $this = $(this);
  $this.next(".content").slideToggle();
  $this.parent().siblings().children().next().slideUp();
  return false;
});

另外，查看上面的小提琴，您可以看到我尝试将content DIV定位在heading DIV的右侧和顶部。 我为此使用了一些CSS：

CSS：

.content {
    display: none;
}
.heading {
    font-weight: bold;
    padding: 15px 0 15px 20px;
    background: GREY;    
    width: 30%;
}
.content {
    width: 100%;
    margin-left: 35%;
    position: absolute;
    top: -2px;
    width: 60%;
}

具体使用绝对和顶部：-2px;

谢谢

Answer 1

是的，你做得很好。 但这会更好。 向容器添加一个类，并检查容器类并执行滑动功能。 if语句将用于删除相同的幻灯片再次重复。

    $(document).ready(function(){
        $(".heading").click(function () {
            if ($(this).next(".content").hasClass("folded")){
                $(".content").slideUp();
                 $(".unfolded").toggleClass("folded").toggleClass("unfolded");
               $(this).next(".content").toggleClass("folded").toggleClass("unfolded").slideDown();
            }
            return false;
        });
    });

这里的小提琴

更新的小提琴

Answer 2

您的代码有效且有意义，您可以通过在新内容的显示中添加一些延迟来进行改进，以实现更好的过渡http://jsfiddle.net/WkuMg/2/

setTimeout(function(){
    $this.next(".content").slideToggle();
}, 200);

您还可以使用类，因此您不必以这种方式对HTML进行排序，而是将所有标头打包在一个部分中，而将所有内容打包在另一部分中。