Blog

jQuery实现半收缩或全部展开的分类效果

在电子商务网站中,下图是二级页面中最常见的一种商品分类展现模式: 也就是网站制作时会默认列出其中一部分搜索率较高的分类,隐藏另外一大部分,免得占用有利的视觉空间,当用户找不到自己需要的分类时,“展开更多▼”之类的按钮会引导他点击继续浏览其它分类;反之,当用户不再需要看更多分类时,便可点击“简洁展现▲”之类的按钮将那部分分类再收缩起来。这个功能用jQuery来实现,很简单;此外我们也可以在按钮展开更多的时候选择高亮显示其中某个类目,只需先定义一个高亮显示样式,然后使用jQuery在适当的时候调用就好了。光说不练,等于白干。下面贴上此效果的完整源码,有兴趣的可以复制到html文件里,看看效果,并揣摩类似应用。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JQuery实现半收缩或全部展开的菜单效果——CCJK本地化官方博客——我们提供专业的网站开发、翻译本地化、网络推广一站式解决方案</title> <script src="jquery.js"></script> <script type="text/javascript"> $(function(){ var moreMenu = $(".menu ul li:gt(5):not(:last)"); $(moreMenu).hide(); var moreBtn = $(".more"); $(moreBtn).click(function(){ if (moreMenu.is(":visible")){ $(moreMenu).hide(); $(".more a").text("展开更多▼"); $(".menu ul li").removeClass("promoted"); }else{ $(moreMenu).show(); $(".more a").text("简洁展现▲"); $(".menu ul li").filter(":contains('香蕉')").addClass("promoted"); } return false; }); }); </script> <style type="text/css"><!-- * {margin:0; padding:0; font-family:'微软雅黑';} ul {list-style:none;} a {text-decoration:none; color:#000;} .menu {border:1px solid #ccc; width:600px; margin:30px auto;} .menu ul li {display:inline-block; width:32%; text-align:center; padding:8px 0;} .menu ul li.more {display:block; border:2px solid #eee; border-radius:5px; background:#f1f1f1; margin:20px auto 20px;} .menu ul li.more a {font-weight:bold;} .promoted a {color:#ccc;} --></style> </head> <body> <div> <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> <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> </body> </html> 附:大家在项目制作中运用jQuery的时候,一定不要忘了首先调用jquery.js文件到html页面哦。

Words translated by CCJK

146,096,379

Request a call or contact us

  •  

    Call ccjk.support for professional assistance

  •  

    Click Here to leave us a message and be as detailed as possible.

We are Certified

Our Client Satisfaction

rating for previous quarte

4.00
  •  
    Inquiry Form

    Please take few minutes to fill
    inquiry form and get Free Quote

  •  
    Request a Call

    Click to receive Free Call, Our
    Representative will contact you

  •  
    Leave a Message

    Please leave us a message and
    be as detailed as possible

Over 95% of our clients recommend our language services to others


Copyright © CCJK Technologies Co., Ltd. 2000-2017. All rights reserved.
TOP