Question

我正在尝试使用.details创建切换按钮。首次加载时，它应显示为“显示[+]”并隐藏.details-display。单击文本时，它应更改为“显示[ - ]”并向下滑动.details-display。为什么这不起作用？

HTML

<div class="slide-caption">
    <span class="details">Details[+]</span>
    <span class="details-display">The connecting walkway floats above the second story of the Main hall, joining the North and the South wings.</span>
</div>

JS

$('span.details').toggle(function(){
    $(this).html('Details[-]');
    $(this).parent().find("span.details-display").slideDown("slow");
}, function() {
    $(this).html('Details[+]');
    $(this).parent().find("span.details-display").slideUp("slow");
});

CSS

.details-display {
    display: none;
}

http://jsfiddle.net/xrzcu0na/1/

Answer 1

以下是jsFiddle的更新工作版本：

http://jsfiddle.net/xrzcu0na/6/

我将代码更改为：

var toggled = true;
$('span.details').click(function () {
    if (toggled) {
        $(this).html('Details[-]');
    } else {
        $(this).html('Details[+]');
    }
    toggled = !toggled;
    $(this).parent().find("span.details-display").slideToggle("slow");
});

在点击时添加点击处理程序以切换元素。

Answer 2

因为您没有以点击事件为条件。

现在，只要发生事件$(document).ready()，两个函数都会立即执行，而不是在发生任何鼠标点击时执行。

另请注意，函数.toggle()隐藏了元素：jQuery API。

更好的版本是：

$('span.details').click(function() {
    $('.details-display').slideToggle("slow");

    if ( $('.details').html() == 'Details[+]' ) {
        $('.details').html('Details[-]');
    } else {
        $('.details').html('Details[+]');
    }
});

我使用函数.slideToggle()

Answer 3

使用以下脚本也更新了JSFiddle http://jsfiddle.net/xrzcu0na/10/

  $(function(){
    $('span.details').click(function(){
        if($(this).next("span.details-display").is(":visible"))
        {
             $(this).html('Details[+]');
             $(this).next("span.details-display").slideUp("slow");
        }
        else
        {     $(this).html('Details[-]');
              $(this).next("span.details-display").slideDown("slow");
        }
    });
})

为我工作

希望这有帮助。

Answer 4

$.toggle()的用法为deprecated：

不推荐使用
版本：1.8，已删除：1.9

我猜测您使用的是1.9版或更高版本，因此它不存在。 $.toggle()现在仅用于动画显示/隐藏（由于新的用户限制，无法链接）。它不是将交替的点击事件绑定到对象，而是用于显示/隐藏所选元素。

在winhowes的回答基础上，你可以消除那些小小的＆＃34;跳跃＆＃34;通过按钮下方显示详细信息：http://jsfiddle.net/a6s1t2d4/

我还将两个函数调用（$.parent()和$.find()）更改为一个（$.nextAll();而不只是$.next()，因为下一个元素现在是{{1} }）。

jQuery toggle / slideDown / slideUp无法按预期工作

4 个答案: