Question

我在div（.text-one）中有一个div（.test-two），它是隐藏的。使用单击，div（.test-two）会被显示，但我也想通过滑动隐藏所有显示的div（.test-two）。

我可以将它们设置为显示：无，但这并没有给我幻灯片效果，最终只是让它们消失。

$('.test-one').on("click", function () {
    //$('.test-two').css('display', 'none');
    $(this).find('.test-two').slideToggle();
});

请参阅链接 - http://jsfiddle.net/1eddy87/hy23ctdn/

Answer 1

我在你的javascript中添加了一行：

$('.test-one').on("click", function () {
    //$('.test-two').css('display', 'none');
    $('.test-two').slideUp();
    $(this).find('.test-two').slideToggle();
});

我认为这就是你想要的。 http://jsfiddle.net/emdgwn38/

首先关闭所有测试二级，然后切换打开被点击的一个，但是无缝地完成，所以点击的div的关闭会立即中断。

附加信息:(编辑）

以下是如何让已经打开的div在进一步点击时保持打开状态：

$('.test-one').on("click", function () {
    //$('.test-two').css('display', 'none');
    $('.test-two').slideUp();
    if ($(this).find('.test-two').is(":visible")){
    $(this).find('.test-two').stop();}
    else{
    $(this).find('.test-two').stop().slideToggle();}
});

它检查div是否可见，如果是，则使其停止前一行调用该类的所有div关闭，但仅限于被点击的div。 http://jsfiddle.net/emdgwn38/2/

如何显示正在切换的元素并隐藏其他元素

1 个答案: