Question

我正在使用Bootstrap中的Collapse JS，并希望在点击时更改折叠按钮文本。

我正在使用一个非常简单的JS来更改按钮的文本，但是它有一个问题：如果我在按钮上点击太快，文本会发生变化，但崩溃不会跟随。所以我将文本还原（显示隐藏和隐藏显示行为）。

jQuery(function () {
    return $('.collapse-link').click(function () {
        var $this;
        $this = $(this);
        $this.toggleClass('collapsed');
        if ($this.hasClass('collapsed')) {
            $this.text('Show');
        } else {
            $this.text('Hide');
        }
    });
});

这是小提琴：jsfiddle.net/9x80309y/1

尝试在“显示”按钮上快速单击。我怎么能避免这个？

Answer 1

Please see bootstrap collapse events documentation.

Bootstrap collapse JS将在状态完成时触发事件，以便您可以使用这些来确保您的按钮始终具有正确的文本，具体取决于崩溃所处的状态。

<Style TargetType="{x:Type Button}" x:Key="MyCustomButtonStyle">
    <Setter Property="Content" Value="Unfinished" />
    <Style.Triggers>
        <DataTrigger Binding="{Binding ElementName=MyListBox, Path=SelectedItem.Status}" Value="Current">
            <Setter Property="Content" Value="Finished" />
        </DataTrigger>
    </Style.Triggers>
</Style>

http://jsfiddle.net/hpeinar/9x80309y/3/

Answer 2

无法重新创建，但请尝试将其作为确保您处于正确状态并避免竞争条件的方式（最有可能）。

jQuery(function () {
    return $('.collapse-link').click(function () {
        var $this;
        $this = $(this);

        if (!$this.hasClass('collapsed')) {
            $this.text('Show');
            $this.addClass('collapsed');
        } else {
            $this.text('Hide');
            $this.removeClass('collapsed');
        }
    });
});

避免文本在崩溃的分歧中发生变化

2 个答案: