Question

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

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

    $('a#hide-all').click(function() {
        $('.hide-container').hide(); });
    $('.hide-container').hide();
});

我遇到问题：隐藏+时如何添加div标记等图像，以及显示时出现-标记？

Answer 1

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

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

然后，使用.toggleClass()代替.toggle()。将类应用于父元素：

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

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

修改：如果您希望图片可点击：

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

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

Answer 2

在重新格式化代码时，它出现了：

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

}); // <-- What is this?

也许这就是为什么它不起作用？

如何在JavaScript中使用<div>显示/隐藏代码包含指标图像？</div>

2 个答案: