- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>jquery点击展开隐藏层</title>
- <script src="http://www.daimajiayuan.com/templets/skins/js/jquery-1.8.1.min.js"></script>
- <script>
- (function($){
- $.fn.moreShow = function(div,moreval,less,num,event){
- var divdiv= div || '',
- morevalmoreval = moreval || '更多',
- lessless = less || '收起',
- numnum = num || 8,
- eventevent = event || 'click'
- return this.each(function(i){
- $(this).bind(event,function(){
- if ($(this).text()== moreval)
- {
- if(div){
- $(div).each(function(i){
- $(this).show();
- });
- }else {
- $('.none'+$(this).attr('hid')).each(function(i){
- $(this).show();
- });
- }
- $(this).empty();
- $(this).html(less);
- $(this).removeClass('s_arr_down');
- $(this).addClass('s_arr_up');
- }
- else
- {
- if(div){
- $(div).each(function(i){
- if (i>num)
- {
- $(this).hide();
- }
- });
- }
- else{
- $('.none'+$(this).attr('hid')).each(function(i){
- if (i>num)
- {
- $(this).hide();
- }
- });
- }
- $(this).empty();
- $(this).html(moreval);
- $(this).removeClass('s_arr_up');
- $(this).addClass('s_arr_down');
- }
- })
- })
- }
- })(jQuery);
- </script>
- </head>
- <body>
- <div class="s_cate_cont">
- <ul class="clearfix">
- <li> <span class="s_cate_item"> <a href="#">车床</a> <i class="s_cate_num">(116188)</i> </span> </li>
- <li> <span class="s_cate_item"> <a href="#">钻床</a> <i class="s_cate_num">(99074)</i> </span> </li>
- <li> <span class="s_cate_item"> <a href="#">镗床</a> <i class="s_cate_num">(16246)</i> </span> </li>
- <li> <span class="s_cate_item"> <a href="#">磨床</a> <i class="s_cate_num">(70717)</i> </span> </li>
- <li> <span class="s_cate_item"> <a href="#">铣床</a> <i class="s_cate_num">(117001)</i> </span> </li>
- <li> <span class="s_cate_item"> <a href="#">拉床</a> <i class="s_cate_num">(2163)</i> </span> </li>
- <li> <span class="s_cate_item"> <a href="#">锯床</a> <i class="s_cate_num">(40590)</i> </span> </li>
- <li> <span class="s_cate_item"> <a href="#">刨插床</a> <i class="s_cate_num">(11927)</i> </span> </li>
- <li style="display:none"> <span class="s_cate_item"> <a href="#">齿轮加工机床</a> <i class="s_cate_num">(10542)</i> </span> </li>
- <li style="display:none"> <span class="s_cate_item"> <a href="#">螺纹加工机床</a> <i class="s_cate_num">(38128)</i> </span> </li>
- <li style="display:none"> <span class="s_cate_item"> <a href="#">管子加工机床</a> <i class="s_cate_num">(283)</i> </span> </li>
- <li style="display:none"> <span class="s_cate_item"> <a href="#">组合机床</a> <i class="s_cate_num">(6648)</i> </span> </li>
- <li style="display:none"> <span class="s_cate_item"> <a href="#">加工中心</a> <i class="s_cate_num">(51104)</i> </span> </li>
- <li style="display:none"> <span class="s_cate_item"> <a href="#">刻线机</a> <i class="s_cate_num">(2)</i> </span> </li>
- <li style="display:none"> <span class="s_cate_item"> <a href="#">其他金属切削机床</a> <i class="s_cate_num">(122583)</i> </span> </li>
- </ul>
- <div class="s_cate_more s_arr_down">更多</div>
- </div>
- <script>
- $('.s_cate_more').moreShow(".s_cate_cont > .clearfix > li","更多","收起",7);
- </script>
- <style>
- .s_cate_cont{ float:left; position:relative; width:700px; margin:5px 10px 0 10px;border-top:1px #ccc dotted}
- .s_cate_cont ul{ width:620px; margin-bottom:4px;}
- .s_cate_cont ul li{ float:left; width:155px; height:40px; overflow:hidden;border-bottom:1px #ccc dotted}
- .s_cate_cont ul li span.s_cate_item{ display:block; width:145px; height:20px; margin:10px 5px 10px 0; overflow:hidden; white-space:nowrap; _white-space:normal; *+white-space:normal;}
- .s_cate_cont ul li span a{ padding:2px;}
- .s_cate_cont ul li span a:hover{ background:#2a5db0; color:#fff; text-decoration:none;}
- .s_cate_cont ul li span a.s_cate_current{ background:#2a5db0; color:#fff; text-decoration:none;}
- .s_cate_cont ul li span i.s_cate_num{ height:20px; line-height:20px; color:#999;}
- .s_cate_more{position:absolute; top:11px; right:0; padding-right:10px; cursor:pointer;}
- </style>
- </body>
- </html>
零七网部分新闻及文章转载自互联网，供读者交流和学习，若有涉及作者版权等问题请及时与我们联系，以便更正、删除或按规定办理。感谢所有提供资讯的网站，欢迎各类媒体与零七网进行文章共享合作。
