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小提琴

另外：如何添加选项，以便在打开新的div之后隐藏打开的div，而且即使您没有打开新的div通过单击"hide"当前打开的选项。 "hide"文字）

Answer 1

您可以通过几种方法执行此操作。 使用当前的html标记，您可以使用jQuery的Next Function 。

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

或者，您可以将切换和内容包装在div中，然后使用父级和查找功能。

的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的Not Function排除刚切换的div。

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