显示/隐藏使用jQuery的切换功能

Question

jQuery脚本
这段代码可以工作，但是有没有可能在slideToggle方法中添加“选项”，以便我切换“显示/隐藏”文字？

$(function() {
    var container  = $('div.container p'),
        button     = $('div#click');
    container.hide();
    button.on('click', function() {
        if (button.text() == 'Show') {
            button.text('Hide');
        } else {
            button.text('Show');
        }
        $(this).next().slideToggle(300);
    });
});

http://jsfiddle.net/sachq/mt3duxzk/1/

- sachq

---

你能提供更多关于你需要帮助的细节吗？你的请求不是很明确。 - Ty T.

你可以将if语句改为简短版本： button.text(button.text() == 'Show' ? 'Hide' : 'Show'); - Aleksandar Gajic

Answer 1

您可以尝试一下。如果您希望在单击按钮后立即触发回调函数，则还可以将"complete"选项更改为"start"。

演示：这里是一个FIDDLE

    var container  = $('div.container p');
    var button     = $('div#click');

    container.hide();
    button.on('click', function(){
        container.slideToggle({
            duration: 200,
            complete: function(){
                var txt = (button.text() === 'Show') ? "Hide" : "Show";
                button.text(txt);
            }
        });
    });

- CodeGodie

Answer 2

我可以提供更好的方法。这个想法是你不应该在JavaScript代码中硬编码按钮文本。这会使代码非常显眼和紧密耦合，因为如果你决定将文本从“显示”更改为“显示更多”，则必须修改JavaScript代码。相反，你可以同时放置两个标签，但只显示一个：

<div id="click"><span class="show">Show</span><span class="hide">Hide</span></div>

Javascript：

button.on('click', function () {
    button.toggleClass('hide');
    $(this).next().slideToggle(300);
});

和 CSS：

div#click > span {
    display: none;
}
div#click .show {
    display: inline-block;
}
div#click.hide .hide {
    display: inline-block;
}
div#click.hide .show {
    display: none;
}

---

更新：显然有人不同意我的看法。但是很容易看出，稍微增加一点代码的好处比起一开始看起来的要大得多。上述方法比较文本字符串更加灵活。更不用说它还允许使用图像和其他元素进行高级按钮样式设计，这在硬编码字符串时可能会有问题。

演示：http://jsfiddle.net/mt3duxzk/3/

- dfsq

Answer 3

你不能这样做，但你可以简化为三元运算符。

button.text(function(_, txt){
   return txt == "Show" ? "Hide" : "Show"
}).next().slideToggle(300);

- Amit Joki

---

不需要在text()中使用$(this).text()，第二个参数是现有的文本。 - charlietfl

.text(function(i, oldText) { return oldText === 'Show' ? 'Hide' : 'Show'}) 更好。 - lonesomeday

谢谢。我不确定是第一还是第二，因此使用了“this”。 - Amit Joki

你可以使用 is(':visible') 来确定切换元素的状态，更新后的 Fiddle。 - sachq