如何添加图像来显示/隐藏div javascript？ [英] How to add image to show/hide div javascript?

问题描述

如何添加图像（如+或 - ）以显示/隐藏javascript中的div？

Any suggestions how to add image (like + or - ) to show/hide div in javascript?

我正在使用此代码显示/隐藏div：

I'm using this code to show/hide divs:

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

如何添加指标图像？

推荐答案

将图像设置为css中的背景：

Set the image as a background in your 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（）。将该类应用于父元素：

Then, use .toggleClass() instead of .toggle(). Apply the class to the parent element:

$('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/

这篇关于如何添加图像来显示/隐藏div javascript？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！