exercise_2017_03_03
/
index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="description" content="菜单及手风琴练习代码">
  <meta name="author" content="dada">
  <title>菜单及手风琴练习</title>
  <link rel="stylesheet" type="text/css" href="./styles/reset.css">
  <link rel="stylesheet" type="text/css" href="./styles/icon.css">
  <link rel="stylesheet" type="text/css" href="./styles/menu.css">
  <link rel="stylesheet" type="text/css" href="./styles/accordion.css">
  <link rel="stylesheet" type="text/css" href="./styles/main.css">
</head>
<body>
<aside class="menu">
  <nav>
    <div class="desc">菜单</div>
    <ul>
      <li class="more">
        <i class="icon icon-books"></i> <span>菜单1</span>
        <ul>
          <li class="more">
            菜单1-1
            <ul>
              <li><a href="#content-1">菜单1-1-1</a></li>
              <li><a href="#content-1">菜单1-1-2</a></li>
              <li><a href="#content-1">菜单1-1-3</a></li>
              <li><a href="#content-1">菜单1-1-4</a></li>
            </ul>
          </li>
          <li class="more">
            菜单1-2
            <ul>
              <li><a href="#content-1">菜单1-2-1</a></li>
              <li><a href="#content-1">菜单1-2-2</a></li>
              <li><a href="#content-1">菜单1-2-3</a></li>
              <li><a href="#content-1">菜单1-2-4</a></li>
            </ul>
          </li>
          <li><a href="#content-1">菜单1-3</a></li>
          <li><a href="#content-1">菜单1-4</a></li>
        </ul>
      </li>
      <li class="more">
        <i class="icon icon-folder"></i> <span>菜单2</span>
        <ul>
          <li class="more">
            菜单2-1
            <ul>
              <li><a href="#content-1">菜单2-1-1</a></li>
              <li><a href="#content-1">菜单2-1-2</a></li>
              <li><a href="#content-1">菜单2-1-3</a></li>
              <li><a href="#content-1">菜单2-1-4</a></li>
            </ul>
          </li>
          <li><a href="#content-1">菜单2-2</a></li>
          <li><a href="#content-1">菜单2-3</a></li>
          <li><a href="#content-1">菜单2-4</a></li>
        </ul>
      </li>
      <li class="more">
        <i class="icon icon-library"></i> <span>菜单3</span>
        <ul>
          <li><a href="#content-1">菜单3-1</a></li>
          <li><a href="#content-1">菜单3-2</a></li>
          <li><a href="#content-1">菜单3-3</a></li>
          <li><a href="#content-1">菜单3-4</a></li>
        </ul>
      </li>
      <li><a href="#content-1"><i class="icon icon-list"></i> <span>菜单4</span> </a></li>
      <li><a href="#content-1"><i class="icon icon-menu"></i> <span>菜单5</span> </a></li>
      <li><a href="#content-1"><i class="icon icon-sphere"></i> <span>菜单6</span> </a></li>
      <li><a href="#content-1"><i class="icon icon-stack"></i> <span>菜单7</span> </a></li>
      <li><a href="#content-1"><i class="icon icon-tree"></i> <span>菜单8</span> </a></li>
    </ul>
  </nav>
</aside>

<script>
  var accordion
  function play(method, idx, instance) {
    console.log(arguments)
    var acc = accordion
    if (instance) {
      acc = acc.get(instance)
    }
    acc[method].call(acc, idx)
  }
  function create() {
    accordion = $$.accordion()
  }
</script>
<section class="main">
  <h1>这是第一个手风琴</h1>
  <div class="padding">
    <button type="button" onclick="play('open', 0)">打开第1个面板</button>
    <button type="button" onclick="play('close', 0)">关闭第1个面板</button>
    <button type="button" onclick="play('toggle', 0)">Toggle第1个面板</button>
  </div>
  <div class="padding">
    <button type="button" onclick="play('open', 1)">打开第2个面板</button>
    <button type="button" onclick="play('close', 1)">关闭第2个面板</button>
    <button type="button" onclick="play('toggle', 1)">Toggle第2个面板</button>
  </div>
  <div class="padding">
    <button type="button" onclick="play('open', 2)">打开第3个面板</button>
    <button type="button" onclick="play('close', 2)">关闭第3个面板</button>
    <button type="button" onclick="play('toggle', 2)">Toggle第3个面板</button>
  </div>
  <div class="padding">
    <button type="button" onclick="play('open', 3)">打开第4个面板</button>
    <button type="button" onclick="play('close', 3)">关闭第4个面板</button>
    <button type="button" onclick="play('toggle', 3)">Toggle第4个面板</button>
  </div>
  <div class="padding">
    <button type="button" onclick="create()">创建实例</button>
    <button type="button" onclick="play('destroy', undefined, 0)">销毁实例</button>
  </div>

  <div id="accordion-1" class="accordion">
    <h3>莫言 - 你不懂我，我不怪你 #1</h3>
    <div>
      <p>
        每个人都有一个死角， 自己走不出来，别人也闯不进去。<br>
        我把最深沉的秘密放在那里。<br>
        你不懂我，我不怪你。
      </p>
      <p>
        每个人都有一道伤口， 或深或浅，盖上布，以为不存在。<br>
        我把最殷红的鲜血涂在那里。<br>
        你不懂我，我不怪你。
      </p>
    </div>
    <h3>莫言 - 你不懂我，我不怪你 #2</h3>
    <div>
      <p>
        每个人都有一场爱恋， 用心、用情、用力，感动也感伤。<br>
        我把最炙热的心情 藏在那里。<br>
        你不懂我，我不怪你。
      </p>
      <p>
        每个人都有 一行眼泪， 喝下的冰冷的水，酝酿成的热泪。<br>
        我把最心酸的委屈汇在那里。<br>
        你不懂我，我不怪你。
      </p>
      <p>
        每个人都有一段告白， 忐忑、不安，却饱含真心和勇气。<br>
        我把最抒情的语言用在那里。<br>
        你不懂我，我不怪你。
      </p>
    </div>
    <h3>莫言 - 你不懂我，我不怪你 #3</h3>
    <div>
      <p>你永远也看不见我最爱你的时候，<br>
        因为我只有在看不见你的时候，才最爱你。<br>
        同样，你永远也看不见我最寂寞的时候，<br>
        因为我只有在你看不见我的时候，我才最寂寞。
      </p>
      <p>
        也许，我太会隐藏自己的悲伤。<br>
        也许，我太会安慰自己的伤痕。<br>
        也许，你眼中的我，太会照顾自己， 所以，你从不考虑我的感受。
      </p>
      <p>
        你以为，我可以很迅速的恢复过来，有些自私的以为。<br>
        从阴雨走到艳阳，我路过泥泞、路过风。<br>
        一路走来，你不曾懂我，我亦不曾怪你。
      </p>

      <h3>来个嵌套的试试</h3>
      <div>
        <p>你永远也看不见我最爱你的时候，<br>
          因为我只有在看不见你的时候，才最爱你。<br>
          同样，你永远也看不见我最寂寞的时候，<br>
          因为我只有在你看不见我的时候，我才最寂寞。
        </p>
        <p>
          也许，我太会隐藏自己的悲伤。<br>
          也许，我太会安慰自己的伤痕。<br>
          也许，你眼中的我，太会照顾自己， 所以，你从不考虑我的感受。
        </p>
        <p>
          你以为，我可以很迅速的恢复过来，有些自私的以为。<br>
          从阴雨走到艳阳，我路过泥泞、路过风。<br>
          一路走来，你不曾懂我，我亦不曾怪你。
        </p>
      </div>
    </div>
  </div>

  <br><br><br><br>

  <h1>这是第二个手风琴</h1>
  <div class="padding">
    <button type="button" onclick="play('open', 0, 1)">打开第1个面板</button>
    <button type="button" onclick="play('close', 0, 1)">关闭第1个面板</button>
    <button type="button" onclick="play('toggle', 0, 1)">Toggle第1个面板</button>
  </div>
  <div class="padding">
    <button type="button" onclick="play('open', 1, 1)">打开第2个面板</button>
    <button type="button" onclick="play('close', 1, 1)">关闭第2个面板</button>
    <button type="button" onclick="play('toggle', 1, 1)">Toggle第2个面板</button>
  </div>
  <div class="padding">
    <button type="button" onclick="play('open', 2, 1)">打开第3个面板</button>
    <button type="button" onclick="play('close', 2, 1)">关闭第3个面板</button>
    <button type="button" onclick="play('toggle', 2, 1)">Toggle第3个面板</button>
  </div>
  <div class="padding">
    <button type="button" onclick="play('open', 3, 1)">打开第4个面板</button>
    <button type="button" onclick="play('close', 3, 1)">关闭第4个面板</button>
    <button type="button" onclick="play('toggle', 3, 1)">Toggle第4个面板</button>
  </div>
  <div class="padding">
    <button type="button" onclick="create()">创建实例</button>
    <button type="button" onclick="play('destroy', undefined, 1)">销毁实例</button>
  </div>

  <div id="accordion-2" class="accordion">
    <h3>莫言 - 你不懂我，我不怪你 #1</h3>
    <div>
      <p>
        每个人都有一个死角， 自己走不出来，别人也闯不进去。<br>
        我把最深沉的秘密放在那里。<br>
        你不懂我，我不怪你。
      </p>
      <p>
        每个人都有一道伤口， 或深或浅，盖上布，以为不存在。<br>
        我把最殷红的鲜血涂在那里。<br>
        你不懂我，我不怪你。
      </p>
    </div>
    <h3>莫言 - 你不懂我，我不怪你 #2</h3>
    <div>
      <p>
        每个人都有一场爱恋， 用心、用情、用力，感动也感伤。<br>
        我把最炙热的心情 藏在那里。<br>
        你不懂我，我不怪你。
      </p>
      <p>
        每个人都有 一行眼泪， 喝下的冰冷的水，酝酿成的热泪。<br>
        我把最心酸的委屈汇在那里。<br>
        你不懂我，我不怪你。
      </p>
      <p>
        每个人都有一段告白， 忐忑、不安，却饱含真心和勇气。<br>
        我把最抒情的语言用在那里。<br>
        你不懂我，我不怪你。
      </p>
    </div>
    <h3>莫言 - 你不懂我，我不怪你 #3</h3>
    <div>
      <p>你永远也看不见我最爱你的时候，<br>
        因为我只有在看不见你的时候，才最爱你。<br>
        同样，你永远也看不见我最寂寞的时候，<br>
        因为我只有在你看不见我的时候，我才最寂寞。
      </p>
      <p>
        也许，我太会隐藏自己的悲伤。<br>
        也许，我太会安慰自己的伤痕。<br>
        也许，你眼中的我，太会照顾自己， 所以，你从不考虑我的感受。
      </p>
      <p>
        你以为，我可以很迅速的恢复过来，有些自私的以为。<br>
        从阴雨走到艳阳，我路过泥泞、路过风。<br>
        一路走来，你不曾懂我，我亦不曾怪你。
      </p>
    </div>
  </div>
</section>
<script src="./scripts/accordion.js"></script>
<script>
  (function () {
    create()
  })()
</script>
</body>
</html>