关闭

伸缩导航菜JQ

58人阅读 评论(0) 收藏 举报
分类:

<style>
body{ font-family:Verdana, Geneva, sans-serif; font-size:12px; }
div,ul{ margin:0px; padding:0px;}
a{ text-decoration:none;}
ul,li{ list-style-type: none;}
.SubCategoryBox{ margin:10px auto; width:600px; border:#000 1px solid; padding-top:5px;}
.SubCategoryBox ul{ clear:both; display:block; margin-bottom:20px; height:135px;}
.SubCategoryBox li{ float:left; width:200px; text-align:center; height:24px; line-height:24px;}
.showmore{ margin:0px auto; width:200px; height:30px; line-height:30px; text-align:center; border:#ccc 1px solid; margin-bottom:10px;}
</style>
<script src="jquery-1.11.3.js" type="text/javascript" /></script>
<script>
$(function(){
  var $category=$('ul li:gt(5):not(:last)');
    $category.hide();
var $toggleBtn=$('div.showmore > a');
$toggleBtn.click(function(){
if($category.is(":visible")){
$category.hide();
$('.showmore a span')
.css("background","url(img/down.gif) no-repeat 0 0")
.text("显示全部品牌");
$('ul li').removeClass("promoted");
}else{
$category.show();
$('.showmore a span')
.css("background","url(img/up.gif) no-repeat 0 0")
.text("精简显示品牌");
$('ul li').filter(":contains('佳能'),:contains('尼康'),:contains('奥林巴斯')")
.addClass("promoted");
}
return false;
})
})
</script>





<body>

<div class="SubCategoryBox">
  <ul>
    <li><a href="#">佳能</a><i>(30440)</i></li>
    <li><a href="#">索尼</a><i>(27220)</i></li>
    <li><a href="#">三星</a><i>(20808)</i></li>
    <li><a href="#">尼康</a><i>(17821)</i></li>
    <li><a href="#">松下</a><i>(12289)</i></li>
    <li><a href="#">卡西欧</a><i>(8242)</i></li>
    <li><a href="#">富士</a><i>(14894)</i></li>
    <li><a href="#">柯达</a><i>(9520)</i></li>
    <li><a href="#">宾得</a><i>(2195)</i></li>
    <li><a href="#">理光</a><i>(4114)</i></li>
    <li><a href="#">奥林巴斯</a><i>(12205)</i></li>
    <li><a href="#">明基</a><i>(1466)</i></li>
    <li><a href="#">爱国者</a><i>(3091)</i></li>
    <li><a href="#">其他品牌相机</a><i>(7275)</i></li>
  </ul>
  <div class="showmore">
    <a href="more.html"><span>显示全部品牌</span></a>
  </div>
</div>
</body>
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:21647次
    • 积分:356
    • 等级:
    • 排名:千里之外
    • 原创:8篇
    • 转载:34篇
    • 译文:0篇
    • 评论:0条
    文章分类