在jquery中显示隐藏的方法有很多，下面我来介绍像有一些网站，更多内容或更多城市点击时显示再次点击就隐藏了，下面我们看一个实例。
点击下显示全部，再次点击下隐藏部分。
下面咱用jquery来实现这个效果。
| 代码如下 | 复制代码 |
<script type="text/javascript">
$(document).ready(function(){
var $brand=$(".ulDiv");
var $toggleBen=$("div.more>a"); //获取 显示 按钮
$toggleBen.click(function(){
if($brand.is(":visible")){ //如果元素显示
$brand.hide();
$(".more a span").text("显示");
$("ul li a").removeClass("cc");
}else{
$brand.show();
$(".more a span").text("隐藏");
$("ul li a").filter(":contains('男装'),:contains('智能机'),:contains('美容护肤')").addClass("cc");
}
return false;
});
})
</script> |
代码主要参考锋利的jquery。
说明略有不同,锋利的jquery是把js在头部就加载，这样随便你怎么刷新都没事；但是大家晓得一般我们是把js文件放底部的，这样就带来一个问题，刷新的时候，首先把所
有的DOM加载进来，然后隐藏部分节点，很明显有网页有个自动显隐。这样不是我们要的效果。
js还是那样,我们把需要隐藏的节点用css控制下，勿用js隐藏，这样无论你怎么刷新都木有压力啦
实例
| 代码如下 | 复制代码 |
<style type="text/css">
body{margin:0 auto;font:12px/1.5 tahoma,arial,5b8b4f53;color:#828282;background:#fff}
body,div,p,span,a,ul,li,b,form,input,h1,h2,h3,img,select,option,font,label{margin:0;padding:0}
ul,li{list-style-type: none}
.brand{width:300px;margin:10px auto;}
.brand ul{width:100%;float:left;}
.brand ul li{float:left;margin-left:10px;display:inline}
.more{width:100%;float:left;text-align:center}
.brand .cc{color:red}
.ulDiv{display: none}
.gray_1{color:#333}
a.gray_1{color:#333;text-decoration: none}
a:hover.gray_1{color:#333;text-decoration: none}
</style>
<div class="brand">
<ul>
<li><a href="" target="_blank" class="gray_1">女装</a></li>
<li><a href="" target="_blank" class="gray_1">连衣裙</a></li>
<li><a href="" target="_blank" class="gray_1">T恤</a></li>
<li><a href="" target="_blank" class="gray_1">雪纺</a></li>
<li><a href="" target="_blank" class="gray_1">衬衫</a></li>
<li><a href="" target="_blank" class="gray_1">半裙</a></li>
<li><a href="" target="_blank" class="gray_1">男装</a></li>
<li><a href="" target="_blank" class="gray_1">短裤</a></li>
<li><a href="" target="_blank" class="gray_1">内衣</a></li>
<li><a href="" target="_blank" class="gray_1">内裤</a></li>
<li><a href="" target="_blank" class="gray_1">国际票</a></li>
<li><a href="" target="_blank" class="gray_1">男鞋</a></li>
<li><a href="" target="_blank" class="gray_1">运动鞋</a></li>
<li><a href="" target="_blank" class="gray_1">时装表</a></li>
<li><a href="" target="_blank" class="gray_1">施华洛</a></li>
<li><a href="" target="_blank" class="gray_1">智能机</a></li>
<li><a href="" target="_blank" class="gray_1">电脑维修</a></li>
<li><a href="" target="_blank" class="gray_1">医院</a></li>
<li><a href="" target="_blank" class="gray_1">大牌</a></li>
<li><a href="" target="_blank" class="gray_1">包包</a></li>
<div class="ulDiv">
<li><a href="" target="_blank" class="gray_1">宝贝</a></li>
<li><a href="" target="_blank" class="gray_1">生活</a></li>
<li><a href="" target="_blank" class="gray_1">旅行箱包</a></li>
<li><a href="" target="_blank" class="gray_1">孕产</a></li>
<li><a href="" target="_blank" class="gray_1">建材</a></li>
<li><a href="" target="_blank" class="gray_1">特产</a></li>
<li><a href="" target="_blank" class="gray_1">钢材</a></li>
<li><a href="" target="_blank" class="gray_1">美容护肤</a></li>
<li><a href="" target="_blank" class="gray_1">水泥</a></li>
<li><a href="" target="_blank" class="gray_1">收藏</a></li>
<li><a href="" target="_blank" class="gray_1">保健</a></li>
<li><a href="" target="_blank" class="gray_1">美白</a></li>
<li><a href="" target="_blank" class="gray_1">滋补</a></li>
</div>
<li><a href="" target="_blank" class="gray_1">更多内容</a></li>
</ul>
<div class="more"><a href="" class="gray_1"><span>显示</span></a></div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//var $brand=$("ul li:gt(5):not(:last)");//获取索引值大于5的li 除最后一个
var $brand=$(".ulDiv");
//$brand.hide(); //隐藏
var $toggleBen=$("div.more>a"); //获取 显示 按钮
$toggleBen.click(function(){
if($brand.is(":visible")){ //如果元素显示
$brand.hide();
$(".more a span").text("显示");
$("ul li a").removeClass("cc");
}else{
$brand.show();
$(".more a span").text("隐藏");
$("ul li a").filter(":contains('男装'),:contains('智能机'),:contains('美容护肤')").addClass("cc");
}
return false;
});
})
</script> |
