使用切换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/

Answer 1

您可以继续尝试一下。 如果您希望在单击按钮后立即触发回调，也可以将“完成”选项更改为“开始”。

演示：这是 一个骗局

    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);
            }
        });
    });

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;
}

---

UPD。 显然有人不同意我的看法。 但很容易看出，稍微增加的代码量的好处比它可能首先看到的要大。 上述方法比文本字符串更灵活。 更不用说它还允许按钮的高级样式与图像和其他元素，这可能是硬编码字符串的问题。

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

Answer 3

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

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