Question

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

就类似有我们的百度在回答问题或者提问问题的时候要点击一个按钮，输入就弹出来，按钮也随之改变，再点击就收起输入框，按钮就变回之前那个

Answer 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、点击展开按钮，此时展开了输入框，并且按钮变成了收齐按钮。

Answer 2

jQuery的 toggle() 方法来切换元素的显示和隐藏：显示被隐藏的元素，并隐藏已显示的元素，从而实现上述功能。

$(selector).toggle();  // 切换目标元素的显示和隐藏状态

实例演示：点击按钮出现输入框，同时改变按钮的说明文字，再次点击按钮则隐藏输入框，按钮回到原始状态。如此循环。

1. 创建Html元素

   <div class="box">
   	<span>点击按钮实现展开和收起输入框的切换：</span><br>
   	<div class="content">
   		<span>请发表你的看法</span><input type="button" value="好的"><br>
   		<div class="test"><textarea></textarea></div>
   	</div>	
   </div>

2. 设置css样式

   div.box{width:300px;padding:20px;margin:20px;border:4px dashed #ccc;}
   div.box span{color:#999;font-style:italic;}
   div.content{width:250px;margin:10px 0;padding:20px;border:2px solid #ff6666;}
   textarea{width:250px;height:100px;margin:10px 0;border:1px solid #6699cc;}

3. 编写jquery代码

   $(function(){
   	$(".test").hide();  // 默认隐藏状态
   	$(":button").click(function() {
   		$(".test").toggle('slow');  // 改变显隐状态
   		$(this).val($(this).val()=="好的"?"我不想说了":"好的"); // 改变按钮的文字说明
   	})
   })

4. 观察效果

• 初始状态

  

• 点击“好的”后的效果

  

• 再次点击按钮“我不想说了”

  

Answer 3

你在API文档中查看一下toggle（）.这是API文档中的一个例子，参考下：

对表格的切换一个类
jQuery 代码:$("td").toggle(
function () {
$(this).addClass("selected");
},
function () {
$(this).removeClass("selected");
}
);

Answer 4

这个可以用js控制div层也能实现：
大概这样单击输入的时候 js让这个div层就显示出来 代码：
document.all.div的id.style.display="";
点击输入的时候让这个div层隐藏
document.all.div的id.style.display="none";
希望能帮助到你

追问

可以写出具体的例子吗

Answer 5

你看一下toggle这个方法的用处 希望对你有帮助