javascript - Jquery Slidetoggle 显示隐藏 一次一个 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 通过点击“隐藏” 文本)

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