關閉所有其他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進行排序，而是將所有標頭打包在一個部分中，而將所有內容打包在另一部分中。