jquery顯示/隱藏商品菜單程式執行個體

在一些電商網站或者是分類資訊網站上不難看到他們的導航都是顯示一些大分類，在點擊進入子頁面的時候，又分成了很多小的分類，通常在這些小的分類下面還會顯示點擊查看更多品牌/隱藏品牌的功能。看起來很友好，又高大上。其實製作這麼一個效果並不難，簡單的幾行Jquery代碼即可搞定。下面咱們就來分析一下如何來完成這個高大上的效果。

①開啟頁面的時候，顯示精簡的品牌列表；品牌列表下面有一個顯示更多的按鈕；

②當點擊產品下方“顯示全部品牌的時候”顯示全部的品牌。其實還可以添加很多其他的效果，比如欄目加亮，背景色等等。

首先我們需要用HTML代碼來實現這麼一個結構，用css來控制它的樣式，讓其顯示起來更加的美觀；且看代碼：

<div class="subcategorybox">
   <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>
   </ul>
  </div>
  <div class="showmore"><a href="more.html"><span>顯示全部品牌</span></a></div>

接下來我們用Jquery為這個頁面添加一些互動效果，點擊“顯示全部”的時候顯示全部品牌列表，且文本切換為“顯示全部”替換為“精簡顯示”，點擊的時候隱藏品牌列表，Jquery代碼如下：

<script type="text/javascript">
    $(function(){
        var $category = $("ul li:gt(5):not(:last)").hide(); //從第七個元素開始-倒數第二個結束，隱藏這些元素

        $(".showmore > a").toggle(function(){
            $category.show();//顯示隱藏的品牌
            $(this).find("span").text("隱藏顯示品牌");
            //$("ul li").filter(":contains('佳能'),:contains('尼康'),:contains('蘋果')").css("background","red");

            return false;   //超連結不跳轉
        },function(){
            $category.hide();//隱藏部分品牌
            $(this).find("span").text("顯示全部品牌");
            //$("ul li").filter(":contains('佳能'),:contains('尼康'),:contains('蘋果')").css("background","none"); 這部分內容為篩選項目品牌加亮。
        });
    });
</script>

這樣，就實現了一個簡單的點擊顯示/隱藏品牌列表的功能，當然也可以添加一些其他的高端功能，比如：淡入淡出，拖拽顯示等等。下面我來解釋一下上面的代碼。

大家都清楚，淘寶的列表是顯示一部分，隱藏一部分，我們這個是從第7個開始隱藏後面的元素。

:gt(5)這個是過濾選取器，選取索引大於5的元素，大家都知道索引是從0開始的，5就是第6個元素，大於第6個元素，那麼就是第7個。

:not，:last這兩個都是過濾選取器，:not(:last)這句代碼的意思就是排除最後一個。

hide()隱藏。

find(‘span’).text(‘xxxx’)尋找span元素把裡面的常值內容替換成xxxx。

toggle()是一個函數，用來交替一組動作，也就是點擊顯示，再點擊隱藏。

css(name,value)設定元素的樣式。

filter()篩選出與指定運算式匹配的元素集合。

:contains(‘text’)內容過濾選取器，選取常值內容含有text的元素。

好了簡單的解釋了下代碼的意思，注釋的一段代碼是實現欄目加亮的。感興趣的朋友可以自己測試一下。