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并对其进行了扩展，以便你可以将它保存在外部文件中，如果你加载了已显示内容的页面，你只需要确保用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/

Answer 3

我认为最简单的解决方案是只有一个按钮#toggle，并改变该按钮的内容，如下所示：

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

fiddle

使用if then语句显示/隐藏div（javascript）

3 个答案: