jquery 怎么实现展开和收起按钮之间的切换

JavaScript030

jquery 怎么实现展开和收起按钮之间的切换,第1张

需要准备的材料分别有：电脑、html编辑器、浏览器。

1、首先，打开html编辑器，新建html文件，例如：index.html，并引入jquery。

2、在index.html中的<script>标签，输入jquery代码：

$('button').click(function () {

if ($(this).text() === '展开') {

$('input').show()

$(this).text('收起')

} else {

$('input').hide()

$(this).text('展开')

}

})

3、浏览器运行index.html页面，此时显示出了展开按钮。

4、点击展开按钮，此时展开了输入框，并且按钮变成了收齐按钮。

<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>

<script type="text/javascript">

$(function () {

var content = ""

for (var i = 0i <20i++)

content += "葡萄美酒夜光杯，欲饮琵琶马上催。"

$("#p1").html(content)

$("#btn").toggle(function () {

$("#p1").slideDown("slow")

}, function () {

$("#p1").slideUp("slow")

})

})

</script>

<input type="button" id="btn" value="显示/隐藏" /><p id="p1" style="display:none"></p>

<script src="jquery-1.8.2.js"></script>

<script>

/*展开和收起用一个div,也可以说它是个按钮,假设它的id=d1

假设需要显示和隐藏的div叫d2

下面这段代码只是粗略的实现了你的要求,主要是给你提供个思路

*/

$(function(){

$('#d1').click(function(){//给d1绑定一个点击事件

           

        /*这个判断的意义是,如果d2是隐藏的,那么让它显示出来,并将d1的文本内容替换成收起,

        如果是显示的,那么就隐藏它并将d1的文本内容替换为展开*/

        if($('#d2').is(':hidden'))

        {

          $('#d2').slideDown('slow')  

          $(this).text('收起')

        }else{

          $('#d2').slideUp('slow')

          $(this).text('展开')  

            }

               

    /*这是一个很简单的事件处理,如果还需要跟上图片的变换,就在判断的对应位置写入图片或者背景变换的代码,*/

})

})

</script>

<div id='d1'>展开</div>

<div id='d2' style=" display:none">内容</div>