jquery案例1--网站品牌列表效果_jquery商品展示网站-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_45461146/article/details/143724173

这个系列带着大家手把手的做一些小案例，小demo,今天要讲的第一个demo是网站品牌列表效果，要实现这样一个功能，请看图

思路分析：

点击下方显示全部品牌按钮，显示全部品牌，再点击，隐藏。很简单，我们一步一步来分析

首先，需要用到的知识点：

1.点击，click()

2.显示，show()

3.隐藏，hide（）

4.设置css,.css('background','xxx');

代码实现：

1.html代码我就不解释了，贴上来大家自己看，亲测可以运行

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>网站品牌列表效果</title>
<style type="text/css">
  * {
    margin:0;
	padding:0;
  }
  body {
    font-size:14px;
    text-align:center;
    font-family:"黑体";
  }
  a {
    color:#04D;
    text-decoration:none;
  }
  a:hover {
    color:#F50;
    text-decoration:underline;
  }
  .SubCategoryBox {
    width:948px;
    margin:0 auto;
    text-align:center;
    margin-top:10px;
  }
  .SubCategoryBox ul {
    list-style:none;
  }
  .SubCategoryBox ul li {
    display:block;
    float:left;
    width:200px;
    line-height:30px;
  }
  .showmore {
    clear:both;
    text-align:center;
    padding-top:10px;
  }
  .showmore a {
    display:block;
    width:120px;
    margin:0 auto;
    line-height:24px;
    border:1px solid #aaa;
  }
  .showmore a span {
    padding-left:15px;
    background:url(images/down.gif) no-repeat 0 0;
  }
  .promoted a {
    color:#f50;
  }
  .head{
    background:#f2f2f2;
    padding:5px;
    height:35px;
    text-align:left;
    margin:5px 0px;
  }
  .head h3{
    color:#666;
    margin-top:10px;
    margin-left:10px;
  }
  .head h3 span {
    color:#F60;
  }
  .promoted {
    color:#f50;
  }
</style>
</head>
<body>
  <div id="nav"><img src="images/xiangji.jpg"/></div>
  <div class="SubCategoryBox">
    <div class="head"><h3>商品筛选：<span>热卖相机</span></h3></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>
      <li><a href="#">明基</a></li>
      <li><a href="#">爱国者</a></li>
      <li><a href="#">其它品牌相机</a></li>
	</ul>
	<div class="showmore"><a href="#"><span>显示全部品牌</span></a></div>
  </div>
</body>
</html>

2.基础html页面搭建起来了，我们开始实现功能

（1）未点击按钮前，显示了7个li，前面6个以及最后一个，其余的隐藏了。那么怎么去实现这样一个功能呢？

我们是不是就要用选择器，让<ul>元素下索引值大于5的<li>元素去除最后一个li元素这些元素隐藏，是不是就能达到我们的初始效果

var $category = $("ul li:gt(5):not(:last)");
$category.hide();

        //:last  获取最后一个元素
		//:eq(index) 获取索引等于index的元素
		//:lt(index) 获取索引小于index的元素
		//:gt(index) 获取索引大于index的元素

这里用到了过滤选择器，注释已经给到大家了

（2）当用户单击按钮后，我们先获取按钮

var $toggleBtn = $("div.showmore > a");

然后给按钮添加点击事件，使用show()方法把隐藏的列表显示出来

$toggleBtn.click(function(){
    $category.show();
    return false;
})

到这里还是不行，我们还需要讲显示全部品牌按钮改成精简显示品牌，并且图标也要变写

$(".showmore a span").css("background","url(images/up.gif) no-repeat 0 0").text("精简显示品牌");

写到这里，已经完成了50%了，第三步就是要实现高亮的推荐品牌了，这里我们需要使用filter()方法去筛选出品牌并为他们添加高亮颜色样式addClass()

我们在ul下面的li下去过滤这些品牌，代码怎么写？

$("ul li").filter(":contains('佳能')",":contains('尼康')",":contains('奥林巴斯')").addClass("promoted");

接下来我们就要做一个判断，如果它显示，就让他隐藏，如果隐藏，就让他显示。并且隐藏时，去掉高亮样式

那么完整代码如下：

$(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(images/down.gif) no-repeat 0 0").text("显示全部品牌");
            $("ul li").removeClass("promoted");
            return false;
          } else {
            $category.show();
            $(".showmore a span").css("background","url(images/up.gif) no-repeat 0 0").text("精简显示品牌");
            $("ul li").filter(":contains('佳能')",":contains('尼康')",":contains('奥林巴斯')").addClass("promoted");			
            return false;
          }
        }
	  );
  });

讲到这，这个案例也就结束了，案例不难，涉及到的知识点有点多，大家要复习巩固，才能运用自如哦~