jQuery切换示例以显示和隐藏内容

程序员文章站 2022-07-13 22:06:24

...

要求：单击“显示”按钮时，需要显示可折叠的内容，单击“隐藏”按钮时，需要隐藏可折叠的内容。

解决方案 ：jQuery toggle（）函数。

演示：单击“显示”按钮。

1.可折叠的内容

以下是可折叠内容的HTML示例：

<section class="round-border">
	<h2>Use jQuery toggle to hide/show collapse content</h2>
	<div>
		<button href="#collapse1" class="nav-toggle">Show</button>
	</div>
	<div id="collapse1" style="display:none">
		<p>Bla bla bla bla</p>
	</div>
</section>

<div id="collapse1" style="display:none">上方的“ div”元素被隐藏。为了在单击“显示”按钮时显示内容，我们需要为“显示”按钮创建click事件，如下所示：

$('.nav-toggle').click(function(){
	//logic to show/hide collapsable content
});

2.获取选择器

从属性href获取折叠内容的选择器：

var collapse_content_selector = $(this).attr('href');

3.切换以显示和隐藏

使用jQuery切换显示/隐藏可折叠内容，如下所示：

var toggle_switch = $(this);
$(collapse_content_selector).toggle(function(){
	if($(this).css('display')=='none'){
		toggle_switch.html('Show');//change the button label to be 'Show'
	}else{
		toggle_switch.html('Hide');//change the button label to be 'Hide'
	}
});

4.完整的例子

<html>
 <head>
	<title>jQuery toggle to display and hide content</title>
		
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
	<script>
		$(document).ready(function() {
		  $('.nav-toggle').click(function(){
			//get collapse content selector
			var collapse_content_selector = $(this).attr('href');					
					
			//make the collapse content to be shown or hide
			var toggle_switch = $(this);
			$(collapse_content_selector).toggle(function(){
			  if($(this).css('display')=='none'){
                                //change the button label to be 'Show'
				toggle_switch.html('Show');
			  }else{
                                //change the button label to be 'Hide'
				toggle_switch.html('Hide');
			  }
			});
		  });
				
		});	
		</script>
		<style>	
		.round-border {
			border: 1px solid #eee;
			border: 1px solid rgba(0, 0, 0, 0.05);
			-webkit-border-radius: 4px;
			-moz-border-radius: 4px;
			border-radius: 4px;
			padding: 10px;
			margin-bottom: 5px;
		}
		</style>
	</head>
	<body>
		<section class="round-border">
			<h2>jQuery toggle() to hide/show collapse content</h2>
			<div>
				<button href="#collapse1" class="nav-toggle">Show</button>
			</div>
			<div id="collapse1" style="display:none">
				<p>Bla bla bla bla</p>
			</div>
		</section>
	</body>
</html>