Javascript 使用切换jQuery显示/隐藏

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

---

你不能这么做，但你可以把事情简化为三元运算符

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

---

我可以建议更好的方法。其思想是，您不应该将按钮文本硬编码为javascript代码。它使代码变得非常突兀和紧密耦合，因为如果您决定将文本从“Show”更改为“Show more”，您还必须修改javascript代码。相反，您可以同时放置两个标签，但一次只能显示一个：

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

和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。显然有人不同意我。但很容易看出，稍微增加代码量的好处要比乍看起来更大。上述方法比比较文本字符串灵活得多。更不用说，它还允许对带有图像和其他元素的按钮进行高级样式设置，这可能会对硬编码字符串造成问题

---

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

演示：

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

---

你能提供更多关于你希望得到帮助的细节吗？您的请求不太清楚。您可以将if语句更改为短版本button.text（button.text（）=='Show'？'Hide'：'Show'）；不需要

$（this）.text（）

内部

text（）

，第二个参数是现有文本

。text（函数（i，oldText）{return oldText=='Show'？'Hide'：'Show'}）

会更好。谢谢。不确定它是第一个还是第二个，因此使用

this

您可以使用

is（':visible'）

来确定切换元素的状态，

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