Question

剧透代码：

    <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>

当另一个扰流板被打开（点击）时，如何让另一个破坏者关闭？

Answer 1

在打开您点击的剧透之前，您需要关闭所有剧透。在e.preventDefault（）之后将其添加到您的click事件中：

 e.preventDefault();
 $('.spoiler').hide();

这是一个工作演示：http://jsfiddle.net/erlingormar/4w3yLs11/1/

Answer 2

@erlingormar的解决方案应该有效。但我建议对代码进行一些改进：

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

通过这种方式，您可以更加顺畅地关闭扰流板，并且.active您可以完全控制扰流板当前处于活动状态并需要关闭。

Answer 3

这应该这样做：DEMO

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);
});

加载第一个扰流板并隐藏其他扰流板。后来一次只显示一个Spoiler。

点击另一个时关闭剧透

3 个答案: