Question

我创造了一个简单的2步手风琴：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;
        });
    });

这里是fiddle

更新了 fiddle

Answer 2

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

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

您也可以使用类，因此您不必以这种方式对HTML进行排序，并将所有标题包装在一个部分中，所有内容都包含在另一个部分中。

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

2 个答案: