jquery显示隐藏更多内容信息实例演示

清远大学城网（http://www.qydxc.com）

在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{300px;margin:10px auto;}
            .brand ul{100%;float:left;}
                .brand ul li{float:left;margin-left:10px;display:inline}
            .more{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>