自定义jQuery插件和CSS以显示和隐藏内容

最新推荐文章于 2022-08-23 12:57:46 发布

cyan20115

最新推荐文章于 2022-08-23 12:57:46 发布

阅读量165

点赞数

文章标签： javascript ViewUI

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

解决方案 ：创建一个自定义jQuery插件。

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

注意
这是替代解决方案– jQuery toggle（）函数。

1.可折叠的内容

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

<section class="round-border">
	<h2>Use jQuery + CSS to hide/show collapse content</h2>
	<div>
		<button href="#collapse2" class="nav-collapse">Show</button>
	</div>
	<div id="collapse2" class="collapse">
	<p>Bla bla bla bla</p>
	</div>
</section>

<div id="collapse2" class="collapse">上方的“ div”元素是隐藏的。 CSS的“折叠”具有“ display:none ”，如下所示：

.collapse {
	display: none;	
	position: relative;
	overflow: hidden;
}

注意
<div>具有“折叠” CSS类名时是隐藏的。

2.自定义jQuery插件

为了在单击“显示”按钮时显示内容，我们需要为“显示”按钮创建click事件，如下所示：

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

首先，我们需要从属性href获取折叠内容的选择器：

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

然后，我们使用jQuery检查可折叠的内容元素是否具有“ show” CSS类名：

var collapse_content = $(collapse_content_selector);
if(collapse_content.hasClass('show')){
	//logic to hide the collapsable content
}else{
	//logic to show the collapsable content
}

为了隐藏可折叠的内容，我们需要删除CSS类名“ show”，如下所示：

collapse_content.removeClass('show');

为了显示可折叠的内容，我们需要添加CSS类名“ show”，如下所示：

collapse_content.addClass('show');

CSS“ show”用于将css属性“ display”更改为“ block”，如下所示：

.show{
	display: block;	
}

注意
为了使可折叠的内容在页面加载时显示，我们需要添加“ show” CSS类名，例如<div class="collapse show">....</div> 。

最后，我们需要一个回调函数来使按钮标签变得“隐藏/显示”。例：

显示可折叠内容时的回调函数：

$('.nav-collapse').html('Hide');//change the button label to be 'Hide'

隐藏可折叠内容时的回调函数：

$('.nav-collapse').html('Show');//change the button label to be 'Show'

因此，我们需要将回调函数传递给jQuery插件，例如：

{
  onShow: function(){
	$(this).html('Hide');//change the button label to be 'Hide'
  },
  onHide: function(){
	$(this).html('Show');//change the button label to be 'Show'
  }
}

以下是该插件的最终源代码：

(function($) {
  $.fn.collapse=function(options){
	$(this).click(function(){
		//get collapse content selector
		var collapse_content_selector = $(this).attr('href');					
						
		//make the collapse content to be shown
		var collapse_content = $(collapse_content_selector);
		if(collapse_content.hasClass('show')){
			collapse_content.removeClass('show');
			$(this).html('Show');
			if(options && options.onHide){
				options.onHide();
			}
		}else{
			collapse_content.addClass('show');
			if(options && options.onShow){
				options.onShow();
			}
		}
	});
  }
}(jQuery));

和jQuery使用插件：

$('.nav-collapse').collapse({
	onShow: function(){
		$(this).html('Hide');//change the button label to be 'Hide'
	},
	onHide: function(){
		$(this).html('Show');//change the button label to be 'Show'
	}
});

3.完整的例子

<html>
  <head>
	<title>Use jQuery + CSS 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-collapse').collapse({
		  onShow: function(){
			$(this).html('Hide');//change the button label to be 'Hide'
		  },
		  onHide: function(){
			$(this).html('Show');//change the button label to be 'Show'
		  }
		});
	});
			
	(function($) {
		$.fn.collapse=function(options){
		$(this).click(function(){
			//get collapse content selector
			var collapse_content_selector = $(this).attr('href');					
						
			//make the collapse content to be shown
			var collapse_content = $(collapse_content_selector);
			if(collapse_content.hasClass('show')){
				collapse_content.removeClass('show');
				$(this).html('Show');
				if(options && options.onHide){
					options.onHide();
				}
			}else{
				collapse_content.addClass('show');
				if(options && options.onShow){
					options.onShow();
				}
			}
		  });
		}
		}(jQuery));
			
		</script>
		<style>
			.collapse {
			  display: none;	
			  position: relative;
			  overflow: hidden;
			}
			
			.show{
				display: block;	
			}
			
			.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>Use jQuery + CSS to hide/show collapse content</h2>
			<div>
			<button href="#collapse2" class="nav-collapse">Show</button>
			</div>
			<div id="collapse2" class="collapse">
				<p>Bla bla bla bla</p>
			</div>
		</section>
	</body>
</html>