Jquery slidetoggle Show Hide 一次一个 div

Question

我在创建一次打开一个 div 的 Jquery 切换时遇到问题。

我希望当我点击div (show) 时只显示一个内容。在这里，它们同时打开。

$(document).ready(function(){
    var $content = $(".content").hide();
        $(".toggle").on("click", function(e){
            $(this).toggleClass("expanded");
            $content.slideToggle();
        });
});    

JS Fiddle

另外：如何添加选项以便在打开新的 div 时隐藏打开的 div，但即使您没有打开新的div，也可以选择隐藏当前打开的 div点击"hide"文字）

Answer 1

您可以通过多种方式做到这一点。使用您当前的 html 标记，您可以使用 jQuery's Next Function。

$(".toggle").on("click", function(e){
    $(this).toggleClass("expanded");
    $(this).next().slideToggle();
});

或者您可以将切换和内容包装在一个 div 中，并使用 parent 和 find 函数。

HTML

<div class="wrapper">
    <div class="toggle"></div>
    <div class="content">Lorem Ipsum </div>
</div>

JavaScript

$(".toggle").on("click", function(e){
    $(this).toggleClass("expanded");
    $(this).parent().find('.content').slideToggle();
});

如果您在切换其中一个时希望所有其他.content 到slideUp，只需选择所有.content div 并使用jQuery's Not Function 排除您刚刚切换的div。

$(".toggle").on("click", function(e){
    var target = $(this).parent().find('.content');
    $(this).toggleClass("expanded");
    target.slideToggle();
    $('.content').not( target ).slideUp();
});