Question

我遇到一个问题，就是创建一个Jquery切换，一次打开一个div。

我希望点击div（show）时只显示一个内容。在这里，他们都同时开放。

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

JS Fiddle

另外：如何添加选项，以便在打开新的div时隐藏open div，但也可以选择隐藏当前打开的div，即使您没有打开新的{{ 1}}点击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();
});

Jquery slidetoggle一次显示隐藏一个div

1 个答案: