jQuery toggle/slideDown/slideUp 未按预期工作

Question

我正在尝试使用 .details 创建一个切换按钮。在第一次加载时，它应该只显示为 "Display [+]"，隐藏 .details-display。单击文本时，它应更改为 "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

因为你没有条件点击事件。

现在这两个函数在事件 $(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 2

这是您的 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 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:

version deprecated: 1.8, removed: 1.9

我猜您使用的是 1.9 或更高版本，所以它不存在。 $.toggle() 现在仅用于动画 show/hide（不能 link 因为新用户限制）。它不是将交替单击事件绑定到对象，而是用于 show/hide 所选元素。

根据 winhowes 的回答，您可以通过在按钮下方显示详细信息来消除小 "hop"：http://jsfiddle.net/a6s1t2d4/

我还将两个函数调用（$.parent() 和 $.find()）更改为一个（$.nextAll()；而不仅仅是 $.next()，因为下一个元素现在是 <br />).

jQuery toggle/slideDown/slideUp 未按预期工作

jQuery toggle/slideDown/slideUp not working as expected

javascript

jquery

slide