jQuery权威指南阅读随笔

最新推荐文章于 2020-07-30 17:36:33 发布

My_It5224

最新推荐文章于 2020-07-30 17:36:33 发布

阅读量658

点赞数

分类专栏： jquery 文章标签： jquery javascript

本文链接：https://blog.csdn.net/hxm_ss5224/article/details/41523597

版权

jquery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

第二章的第三节代码:

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title></title>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <style type="text/css">
    body{
	   padding:0px;
	   margin:0px;
	}
	#divFram{
	   width:300px;
	   border:1px solid #abcdef;
	   overflow:hidden;
	}
	li{
	   list-style-type:none;
	}
	#divFram #divTitle{
	  background-color:#ccc;
	  padding:5px;
	  height:23px;
	}
	#divTitle h3{
	  margin:0px;
	  padding:0px;
	  float:left;
	}
	#divTitle span{
	  padding:5px;
	  float:right;
	  cursor:pointer;
	}
	#divTitle span.on{
	  color:#f00;
	}
	#divContent{
	  padding:5px;
	}
	#divContent ul li{
	  float:left;
	  width:80px;
	  height:23px;
	  line-height:23px;
	}
	#divBut{
	  margin-left:215px;
	}
  </style>
  <script type="text/javascript">
  <!--
	$(function(){
	   var spanSelect = $('#divTitle span');
	   spanSelect.click(function(){
		   if($(this).text() == '展开'){
		      $('#divContent').slideUp(300);
			  $(this).addClass('on').html("隐藏");
		   }else{
		      $('#divContent').slideDown(300);
			  $(this).removeClass('on').html("展开");
		   }
	   });
       

	   //
	   var oBut = $('#but');
	   var li = $('#divContent ul li');
	   oBut.click(function(){
	     if(oBut.attr('val') == 'more'){
		  /* li.each(function(i){
		     if(i > 5){
			    $(this).css('display','none');
			 }
		   });
		   */
		   $('ul li:gt(4):not(:last)').hide();
		   $(this).val("更多").attr('val','less');
		 }else{
		  /* li.each(function(){
		      $(this).css('display','block');
		   });
		   */
		   $('ul li:gt(4):not(:last)').show();
		   $(this).val("简化").attr('val','more');
		 }
	   });
	});
  //-->
  </script>
 </head>
 <body>
    <div id="divFram" class="divFram">
		<div id="divTitle" class="divTitle">
			<h3>图书分类</h3>
			<span>展开</span>
		</div>
		<div id="divContent" class="divContent">
			<ul>
				<li><a href="#">小说</a></li>
				<li><a href="#">文艺</a></li>
				<li><a href="#">青春</a></li>
				<li><a href="#">少儿</a></li>
				<li><a href="#">生活</a></li>
				<li><a href="#">社科</a></li>
				<li><a href="#">管理</a></li>
				<li><a href="#">计算机</a></li>
				<li><a href="#">教育</a></li>
				<li><a href="#">工具书</a></li>
				<li><a href="#">引进版</a></li>
				<li><a href="#">其他类</a></li>
			</ul>
		    <div id="divBut" class="divBut">
				<input type="button" value="简化" id="but" val="more">
		    </div>
		</div>
    </div>
 </body>
</html>

My_It5224

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery权威指南阅读随笔

第二章的第三节代码: body{ padding:0px; margin:0px; } #divFram{ width:300px; border:1px solid #abcdef; overflow:hidden; } li{ list-style-type:no
复制链接

扫一扫

专栏目录