使用 if then 语句显示/隐藏 div (javascript)答案

【问题标题】：Show/Hide div using if then statement (javascript)使用 if then 语句显示/隐藏 div (javascript)
【发布时间】：2012-06-19 00:25:39
【问题描述】：

我在这里设置了这个显示/隐藏：http://jsfiddle.net/TwDSx/38/

如果内容正在显示，我想做的是让加号消失，反之亦然，如果内容没有显示，则隐藏减号并显示加号。

我阅读了有关使用图像交换的文章，但仅使用 html/css 什么也没有。另外，如果可能的话，我想将 javascript 保留在 html 之外，而只是在外部调用它。

感谢任何帮助！

【问题讨论】：

标签： javascript jquery show-hide if-statement

【解决方案1】：

编辑：

您可以在单击时附加一个事件处理程序，以切换+ 或- 按钮的显示属性

$('#hide,#show').click(function(){
  $('#hide,#show').toggle();
})

快速演示： http://jsfiddle.net/TwDSx/39/

【讨论】：

问题和答案需要在帖子中提供代码。单独链接到场外代码是不合适的。
老兄......我没有链接到我的个人博客或任何东西......我也没有推广 jsfiddle..
我只是说“场外”。关键是当那个小提琴消失时（不在 StackOverflow 的控制之下），这个答案就变得毫无用处了。可以链接到jsfiddle进行代码演示，但是你也需要在你的帖子中包含代码。
请尝试在答案中发布您的代码。有时它可能不切实际或需要“治疗”，但尤其是当您没有 Linus Torvald 的战争与和平作为答案时，请将代码放在答案块中。只是懒惰不这样做。 :)
你在那个小提琴里的东西，真的，更像是“战争战争，它有什么用？！？！”让您的答案尽可能地自我描述和完整。这很简短，老实说，我不知道需要什么，以及由谁、什么或为什么需要。

【解决方案2】：

我稍微修改了您的 Javascript 并对其进行了扩展，以便您可以将其保存在外部文件中，您只需要确保在加载已显示内容的页面时使用 CSS 隐藏 #show div，或者#hide 反之亦然。

Javascript如下：

$('#show').click(function() {
    ShowClick();
});  

$('#hide').click(function() {
    HideClick();
});

//This Javascript can be external
function ShowClick() {
    $('#content').toggle('slow');
    $('#hide, #show').toggle();
};

function HideClick() {
    $('#content').toggle('fast');
    $('#show, #hide').toggle();
};

Js-Fiddle 可以在这里看到：http://jsfiddle.net/mtAeg/

【讨论】：

有没有办法从外部加载所有的javascript？
毫无疑问，整个脚本可以保存在外部文件中。我最近养成了让我的 jQuery 监听器处于我的视图底部的习惯，我可能应该停止这样做。

【解决方案3】：

我认为最简单的解决方案是只有一个按钮，#toggle，然后像这样更改该按钮的内容：

$('#toggle').click(function () {
    if (this.innerHTML == '-') {
        $('#content').slideUp('fast');
        this.innerHTML = '+';
    } else {
        $('#content').slideDown('slow');
        this.innerHTML = '-';
    }
});

fiddle

【讨论】：