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

Question

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

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

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

任何帮助表示赞赏！

Answer 1

编辑 ：

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

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

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

Answer 2

我稍微修改了您的 Javascript 并对其进行了扩展，以便您可以将其保存在外部文件中，您只需要确保在#show加载已显示内容的页面时使用 CSS 隐藏 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/

Answer 3

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

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

小提琴