JS Plugin

Collapse

折疊/收合效果

將 <a> 加入 data-toggle="collapse" 定義該屬性，以及 aria-expanded 定義欲控制的元素（例如 <div>）是開啟 true 還是關閉 false，並將 href="" 連結欲控制的元素 ID。並將欲控制的元素 <div> 加入 class="collapse" 處理內容的隱藏與顯示。（ .collapse 為隱藏內容， .collapse.in 為顯示內容 ）

範例：搜尋頁、購物車收合明細

<ul class="nav-list category-tree">
  <!-- A1 -->
  <li class="nav-item">
    <a data-toggle="collapse" href="#cate-1-sub" aria-expanded="true" class=""><i class="icon icon-caret-down"></i>第一層分類 A</a>
    <!-- A2 -->
    <ul id="cate-1-sub" aria-expanded="true" class="nav-list collapse in">
      <li class="nav-item">
        <a data-toggle="collapse" href="#cate-1-sub-1" aria-expanded="true" class=""><i class="icon icon-caret-down"></i>第二層分類 AA</a>
        <!-- A3 -->
        <ul id="cate-1-sub-1" aria-expanded="true" class="nav-list collapse in">
          <li class="nav-item"><a href=""><i class="icon icon-caret-down"></i>第三層分類 AAA</a></li>
          <li class="nav-item"><a href=""><i class="icon icon-caret-down"></i>第三層分類 AAB</a></li>
          <li class="nav-item"><a href=""><i class="icon icon-caret-down"></i>第三層分類 AAC</a></li>
        </ul>
      </li>
      <li class="nav-item">
        <a data-toggle="collapse" href="#cate-1-sub-2" aria-expanded="false"><i class="icon icon-caret-down"></i>第二層分類 AB</a>
        <!-- A3 -->
        <ul id="cate-1-sub-2" aria-expanded="false" class="nav-list collapse">
          <li class="nav-item"><a href=""><i class="icon icon-caret-down"></i>第三層分類 ABA</a></li>
          <li class="nav-item"><a href=""><i class="icon icon-caret-down"></i>第三層分類 ABB</a></li>
          <li class="nav-item"><a href=""><i class="icon icon-caret-down"></i>第三層分類 ABC</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <!-- B1 -->
  <li class="nav-item">
    <a data-toggle="collapse" href="#cate-2-sub" aria-expanded="false"><i class="icon icon-caret-down"></i>第一層分類 B</a>
    <!-- B2 -->
    <ul id="cate-2-sub" aria-expanded="false" class="nav-list collapse">
      <li class="nav-item">
        <a data-toggle="collapse" href="#cate-2-sub-1" aria-expanded="false"><i class="icon icon-caret-down"></i>第二層分類 BA</a>
        <!-- B3 -->
        <ul id="cate-2-sub-1" aria-expanded="false" class="nav-list collapse">
          <li class="nav-item"><a href=""><i class="icon icon-caret-down"></i>第三層分類 BAA</a></li>
          <li class="nav-item"><a href=""><i class="icon icon-caret-down"></i>第三層分類 BAB</a></li>
          <li class="nav-item"><a href=""><i class="icon icon-caret-down"></i>第三層分類 BAC</a></li>
        </ul>
      </li>
      <li class="nav-item">
        <a data-toggle="collapse" href="#cate-2-sub-2" aria-expanded="false"><i class="icon icon-caret-down"></i>第二層分類 BB</a>
        <!-- B3 -->
        <ul id="cate-2-sub-2" aria-expanded="false" class="nav-list collapse">
          <li class="nav-item"><a href=""><i class="icon icon-caret-down"></i>第三層分類 BBA</a></li>
          <li class="nav-item"><a href=""><i class="icon icon-caret-down"></i>第三層分類 BBB</a></li>
          <li class="nav-item"><a href=""><i class="icon icon-caret-down"></i>第三層分類 BBC</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Marquee

跑馬燈

.marquee 設定跑馬燈樣式，並利用 .slider 執行跑馬燈轉動效果

客服訊息公告 2/6 ~ 2/14 適逢春節期間暫停出貨，造成不便敬請見諒
開站期間消費滿額$9,999即可抽萬元手機!
<!-- 預設樣式 -->
<div class="slider marquee js-slider-marquee">
  <div class="slider-view marquee-inner">
    <div class="item">
      <span class="title">客服訊息公告</span>
      <span class="desc">2/6 ~ 2/14 適逢春節期間暫停出貨，造成不便敬請見諒</span>
    </div>
  </div>
  <!-- 利用 bxSilder.js 嵌入左右前頭 -->
  <div class="bx-controls">
    <div class="bx-controls-direction">
      <a class="bx-prev marquee-arrow" href=""><i class="icon icon-arrow-left"></i></a>
      <a class="bx-next marquee-arrow" href=""><i class="icon icon-arrow-right"></i></a>
    </div>
  </div>
</div>
<!-- 結帳步驟頁樣式 -->
<div class="cart-form">
  <div class="slider marquee js-slider-marquee-text">
    <div class="slider-view marquee-inner">
      <div class="item"><a href="">開站期間消費滿額$9,999即可抽萬元手機!</a></div>
    </div>
  </div>
</div>
TOP