list_ca.js

$(function(){
  var queryDict = {};
  
  location.search.substr(1).split("&").forEach(function(item) {queryDict[item.split("=")[0]] = item.split("=")[1]}); // 取得網址列的參數
  
  $(".nav>ul>li:has(ul)>a").after('<a href="#" class="menu-plus">+</a>'); // 判斷第一層裡面是否還有選單，有的話就加上 <a href="#" class="menu-plus">+</a>

  $(".nav>ul>li>ul>li:has(ul)>a").after('<a href="#" class="menu-plus">+</a>'); // 判斷第二層裡面是否還有選單，有的話就加上 <a href="#" class="menu-plus">+</a>
  
  $(".nav>#nav-btn").click(function() { // 當點選 #nav-btn 時，就開關第一層的 menu
    $(".nav>ul").slideToggle(function() {
      if ($(this).is(":hidden")) { // 變換上下三角形
        $(".triangle-under").show();
        $(".triangle-top").hide();
      } else {
        $(".triangle-under").hide();
        $(".triangle-top").show();
      }
    });

    return false;
  });

  $('.menu>li>.menu-plus').on('click', function(){ // 當點選第一層 menu-plus 的時候
    $(this).text(function(i, v) {
      return v === '−' ? '+' : '−'; // 判斷目前是 + 還是 −，如果是 + 就換成 −，如果是 − 就換成 +
    });

    $(this).next('.sub-menu').slideToggle(); // 開關第二層的 menu
    
    return false; // 目前沒意義
  });

  $('.sub-menu>li>a.menu-plus').on('click', function(){ // 當點選第二層 menu-plus 的時候
    $(this).text(function(i, v) {
      return v === '−' ? '+' : '−'; // 判斷目前是 + 還是 −，如果是 + 就換成 −，如果是 − 就換成 +
    });

    $(this).next('.sub-menu').slideToggle(); // 開關第三層的 menu

    return false; // 目前沒意義
  });
  
  // 當點選某一個 category 之後，把對應到的 a 加上 click-color class，然後找出叫做 .sub-menu 的爸爸並且開關，然後再找到爸爸上一個的文字，
  // 並且改變 +,−
  $("#category-" + queryDict.category).addClass("click-color").parents(".sub-menu").slideToggle(function(){
    $(this).prev().text(function(i, v) {
      return v === '−' ? '+' : '−';
    });
  });
});

Javascript

• 加了 L2 ~ L4，還有 L46 ~ L50

CSS

• css.css 的 L8698 記得要把 .click-color 後面的 a 拿掉

HTML

• 記得要調整每一個 item 的 id 及 href，要對應起來。如 <a id="category-008" href="?category=008">