Javascript 单击其他扰流板时关闭扰流板

扰流板代码：

    <div id="a1" class="spoiler">Content</div> 
    <div id="a2" class="spoiler">Content</div>
    <div id="a3" class="spoiler">Content</div>
    <div id="a4" class="spoiler">Content</div>
    <div class="contentBoxFooter">
        <a href="a1" class = "spoilerButton">Show/Hide</a>
        <a href="a2" class = "spoilerButton">Show/Hide</a>
        <a href="a3" class = "spoilerButton">Show/Hide</a>
        <a href="a4" class = "spoilerButton">Show/Hide</a>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $(".spoilerButton").click(function (e) { 
            e.preventDefault()
            var foo=$(this).attr('href')
            $('#'+foo).slideToggle(1000); 
        });
    });
    </script>
</body>
</html>

内容
所容纳之物
所容纳之物
所容纳之物
$（文档）.ready（函数（）{
$（“.扰流板按钮”）。单击（函数（e）{
e、 预防默认值（）
var foo=$（this.attr（'href'））
$（'#'+foo）.slideToggle（1000）；
});
});

---

如何在打开（单击）另一个扰流板时关闭另一个扰流板？

在打开单击的扰流板之前，需要关闭所有扰流板。在e.preventDefault（）之后将其添加到单击事件中：

---

这里有一个工作演示：

来自@erlingormar的解决方案应该可以工作。但我建议对代码进行一些改进：

$(".spoilerButton").click(function (e) { 
    e.preventDefault();
    var foo=$(this).attr('href');
    $('.spoiler.active')
        .removeClass('active');
        .slideToggle(100);
    $('#'+foo)
        .addClass('active')
        .slideToggle(1000); 
});

通过这种方式，您可以更平稳地关闭扰流板，并且使用

.active

可以完全控制扰流板当前处于活动状态且需要关闭的内容。

这应该可以做到：

它加载第一个扰流板并隐藏其他扰流板。

---

以后一次只显示一个扰流板。

我想这对所有人都适用。比如

$(".spoilerButton").click(function (e) { 
    e.preventDefault();
    var foo=$(this).attr('href');
    $('.spoiler.active')
        .removeClass('active');
        .slideToggle(100);
    $('#'+foo)
        .addClass('active')
        .slideToggle(1000); 
});

var last = $(".spoiler").hide().eq(0).attr("id");
$(".spoiler").hide().eq(0).show();

$(".spoilerButton").click(function (e) {
    e.preventDefault();
    $('#' + last).slideToggle(1000);
    last = $(this).attr('href');
    $('#' + last).slideToggle(1000);
});