如何添加圖像以顯示/隱藏 div javascript？

Question

任何建議如何添加圖像（如 + 或 - ）以顯示/隱藏 javascript 中的 div？

我正在使用此代碼顯示/隱藏 div：

$(function() {
    $('a.hide').click(function() {
        $(this).closest('.hideable').find('.hide-container').toggle();
    });
    $('a#hide-all').click(function() {
        $('.hide-container').hide();
    });
    $('.hide-container').hide();
    $('a.hide').click(function(e) {
        e.preventDefault();
    });
});

如何添加指示圖像？

Answer 1

這只是偽代碼：

 $(image).click(function(){ $(div).toggle('fast',function(){ if($(div).is(":visible"))$(image).attr('src','minus-image'); else $(image).attr('src','plus-image'); }); });

Answer 2

在 css 中將圖像設置為背景：

.hideable a.hide {
    background-image: url(minus.png);
    background-repeat: no-repeat;
    padding-left: 12px;
}
.hidden a.hide {
    background-image: url(plus.png);
}
.hidden .hide-container {
    display: none;
}

然后，使用.toggleClass()而不是.toggle() 。 將 class 應用於父元素：

$('a.hide').click(function(e) {
    e.preventDefault();
    $(this).closest('.hideable').toggleClass("hidden");
});
$('a#hide-all').click(function() {
    $('.hideable').addClass("hidden");
});
$('.hideable').addClass("hidden");

工作演示： http://jsfiddle.net/gilly3/rK7yN/1/