Question

当我点击具有相同类的div新div时，我无法弄清楚如何添加关闭其他div的功能。我知道它应该很简单，但却无法让它发挥作用。这是小提琴 - http://jsfiddle.net/dnym5p1s/

added correct link

 <div class="option-heading">
            <div class="arrow-up">&#9650;</div>
            <div class="arrow-down">&#9660;</div>
            <h1>Year1</h1>
        </div>
        <div class="option-content">
            Content
        </div>
        <div class="option-heading">
            <div class="arrow-up">&#9650;</div>
            <div class="arrow-down">&#9660;</div>
            <h1>Year2</h1>
        </div>
        <div class="option-content">
            Content
        </div>
$(".option-content").hide(); $(".arrow-up").hide();
        $(".option-heading").click(function(){
                $(this).next(".option-content").slideToggle(150);
                $(this).find(".arrow-up, .arrow-down").toggle();
        });

Answer 1

这样就可以了：

$(".option-content,.arrow-up").hide();
$(".option-heading").click(function () {
    $(".option-content").not($(this).next()).slideUp(250);
    $(".option-heading").not(this).find("div.arrow-up").hide();
    $(".option-heading").not(this).find("div.arrow-down").show();
    $(this).next(".option-content").slideToggle(250);
    $(this).find(".arrow-up, .arrow-down").toggle();
});

<强> jsFiddle example

Answer 2

只需在点击监听器顶部添加$(".option-content").hide();，如下所示：

$(".option-heading").click(function(){
   $(".option-content").hide();
   $(this).next(".option-content").slideToggle(150);
   $(this).find(".arrow-up, .arrow-down").toggle();
});

单击具有相同类别的新Div时隐藏其他Div

2 个答案: