Question

jq点击显示再点击隐藏.做出如下图的效果

Answer 1

html都不给贴一个，只能随便写了

首先在head区引入样式表，或者写在其他样式表文件中

<style type="text/css">
a.zhankai{border:1px dotted #668ecb;color:#668ecb;background:url('加号小图标地址') right center no-repeat;width:60px;font:12px/20px "\5B8B\4F53";display:inline-block;text-align:center}
a.shouqi{background-image:url('减号小图标地址')}
</style>

body区如下

<a href="javascript:" class="zhankai">展开</a>
<script type="text/javascript">
    $(".zhankai").click(function () {
        var a = $(this);
        if (a.text() == "展开")
            a.addClass("shouqi").text("收起");
        else
            a.removeClass("shouqi").text("展开");
    })
</script>

追问

文字部分怎么可以和这按钮融合呢

追答

你的意思是，两个按钮都直接做成图片吧？

head区样式表

<style type="text/css">
a.zhankai{border:1px dotted #668ecb;background:url('加号按钮图片地址');width:60px;display:inline-block;}
a.shouqi{background-image:url('减号按钮图片地址')}
/*a.shouqi{background-position:0 -20px}  可以把两个按钮放在一个图片中，通过定位来获取，嫌麻烦就直接用上面的*/
</style>

body区

<a href="javascript:" class="zhankai">&nbsp;</a>
<script type="text/javascript">
    $(".zhankai").click(function () {
        $(this).toggleClass("shouqi")
    })
</script>

追问

不是。 就是文字一开始是2行。点展开有auto，可以是无所谓的， 就是再点关闭。。万一回去的不对呢。