Question

DIV，CSS如何实现“加减号”“显示隐藏”效果

点击“加”号 -> 会显示隐藏的内容。 （这时“加”号变成“减”号）

点击“减”号 -> 会隐藏显示的内容。 （这时“减”号变成“加”号）

“加”“减”号用的是图片，且不是鼠标划过的效果。

就像下面的图。





Answer 1

<script type="text/javascript" src="js/jq.js"></script><!--这里要引入jQuery库-->
<script type="text/javascript">
$(function(){
    $(".icon").click(function(){
        if($(this).html()=="+"){
        $(this).html("-");
        }
        else{
            $(this).html("+");
        }
        $(".content p").toggle(100);
    });
});
</script>
<style type="text/css">
*{margin:0;padding:0;font:12px/16px 宋体;}
.divcon{width:300px;display:inline-table;padding:10px;border:1px solid #CCC;}
.divcon div{float:left;}
.icon{width:20px;height:20px;border:1px solid #666;text-align:center;line-height:20px;cursor:pointer;}
.content{width:270px;padding-left:5px;}
.content p{color:#999;display:none;}
</style>
<div class="divcon">
    <div class="icon">+</div>
    <div class="content">
        这里是文字哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦……
        <p>隐藏的文字隐藏的文字隐藏的文字隐藏的文字隐藏的文字隐藏的文字</p>
    </div>
</div>

Answer 2

首先要把那个文字包在图片的所属的元素下级，加减号图片设置为背景：
a{
background-image:加号.jpg或者background-image:减号.jpg
}
<a href="javascript:void(0)">
<span>一段文字</span>

<a/>

设置CSS的visited和active伪类：
a:visited{
background-image:减号.jpg或者background-image:加号.jpg
}
a:active span{
display:none;或者display:block;

}

但这种方法是一次性的，不能反复使用。
如果需要反复使用，必须用js来完成，css还无法完成。

Answer 3

1. 隐藏区域是原本就有的容器，样式为display:none;

2. 点击控制是否可见，就绑定+或者-号的click事件，再控制容器的展示或者隐藏；
   

Answer 4

很简单，不就是2张图片.2个div吗。
jquery控制相应的div显示隐藏。。。。