jQueryの基本3

アコーディオン
ドロップダウンメニュー

アコーディオン

アコーディオンはリンクやボタンをクリックすると隠されたコンテンツを表示するUI。
場所を取らず、コンテンツをコンパクトに表示できるため、PCをにもスマートフォンにも適している。スクリプトも簡単である。

html

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="css/layout.css">
<!-- ページレイアウト用CSS -->
<link rel="stylesheet" href="css/dynamic.css">
<!-- jQueryで操作する部分のCSS -->
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="scripts/custom.js"></script>
</head>


    <div class="news">
      <h1>NEWS</h1>
      <!-- ==============accordion============== -->
      <ul class="accordion">
        <li>
          <h2>オープンソースで自然とともに</h2>
          <div class="content">
            <p>jQuero(ジェイクエロ)は...プロジェクトです。</p>
          </div>
        </li>
        <li>
          <h2>電力使用量を減らそう</h2>
          <div class="content">
            <p>できるかぎり少ない消費電力の少ないPCを...証明を消しています。</p>
          </div>

        </li>
        <li>
          <h2>コラボレーションから生まれたプロダクツ</h2>
          <div class="content">
            <p>常識を覆すサスティナブルな..生まれました。</p>
          </div>
        </li>
        <li>
          <h2>多くのことをより簡単に。</h2>
          <div class="content">
              <p>ある程度使えるよになれｂｑ...手間がかかりません。</p>
          </div>
        </li>
        <li>
          <h2>最初は少しずつ</h2>
          <div class="content">
            <p>上達のコツは、ちよっと書いては確認...しらべてみることです。</p>
          </div>
        </li>
      </ul>

      <!-- ==============/accordion============== -->
    </div><!-- /.news -->

    <div class="articles">
      <h1>ARTICLES</h1>
      <!-- ==============ajax============== -->

      <!-- ==============/ajax============== -->
    </div><!-- /.articles-->
  </div><!-- /.main -->

</div><!-- /.wrapper-main -->

css

.accordion > li {
  cursor: pointer;
  margin: 0 0 5px 0;
  padding: 25px 10px;
  border-radius: 5px;
  background-color: #ededed;
  background-image: url(../images/arrow-down.png);
  background-position: bottom center;
  background-repeat: no-repeat;
}

.accordion > li:hover {
  background-color: #ddd;
}

.accordion > li > h2 {
  font-weight: normal;
}

.accordion > li .content {
  display: none;
}

/* アコーディオンが開いたときのスタイル */
.accordion > li.expanded {
  background-color: #ddd;
  background-image: url(../images/arrou-up.png);
}

.accordion > li.expanded > h2 {
  font-weight: bold;
}

.accordion > li.expanded .content {
  margin: 10px 0 0 0;
  padding: 10px 0 0 0;
  border-top: solid 1px #fff;
}

$(function(){
  $('.accordion')
  .on('click', 'li', function(){
    var $this = $(this);
    // コンテンツを開く
    $this
    .toggleClass('expanded')
    .children('.content')
    .slideToggle('fast');
  });
});

クリックされたアコーディオンを開閉する方法

<ul class=”accordion”>に含まれる<li>の各項目がクリックされると処理が開始する。
clickイベントが発生したときのハンドラでは、まずクリックされた<li>を変数$thisに代入する、
その$thisにexpandedクラスがなければ追加、あれば削除。
<li>にexpandedクラスは追加されているときは、dynamic.cssのアコーディオンが開いたときのcssが適用される。
この処理によって、アコーディオンが開いているときと閉じているときのCSSを切り替えている。
また、クリックされた<li>の子要素である<div class=”content”>に対しては、slideToggle()を実行してアコーディオンを開閉する。

.toggleClass(‘クラス名’)

toggleClass()は、()内で指定したクラスが、対象となる要素についていなければそのクラスを追加、あれば削除する。
addClass()、removeClass()を合わせたようなメソッドと考えれば良い。

<a>でなくてもclickイベントのハンドラを設定できる

clickイベントを始めとして、mouseenter、mouseleaveなどのマウスイベントは、<a>でなくてもハンドラを設定できる。
つまり、<a>以外多くのタグに、クリックされたときの処理を記述することができる。
<a>以外のタグの多くには、クリックされたときのデフォルト動作がない。そのため、event.preventDefaultを設定しなくてもよい。

ドロップダウンメニュー

[LANGUAGE]をクリックするとメニューが表示され、もう一度クリックするとメニューがたたまれるという基本動作を実装する。

html

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>c03 | Chapter 3 | jQuero</title>
<link rel="stylesheet" href="css/layout.css">
<!-- ページレイアウト用CSS -->
<link rel="stylesheet" href="css/dynamic.css">
<!-- jQueryで操作する部分のCSS -->
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="scripts/custom.js"></script>
</head>
<body>
<div class="wrapper-header">
  <div class="header">
    <!-- ==============dropdown-menu============== -->
    <div class="wrapper-menubar">
      <ul class="menubar">
          <li class="dropdown-menu">
            <a href="#">LANGUAGE</a>
            <ul class="items">
              <li><a href="#">Japanese</li>
              <li><a href="#">English</li>
              <li><a href="#">Chienes</li>
              <li><a href="#">Russian</li>
            </ul>
          </li>
      </ul>
    </div>

    <!-- ==============/dropdown-menu============== -->

</body>
</html>

css

.wrapper-menubar {
  height: 45px;
  position: relative;
}
.menubar {
  position: absolute;
}
.dropdown-menu {
  width: 150px;
}
/* ボタンのスタイル */
.dropdown-menu > a {
  display: block;
  padding: 5px 0 5px 40px;
  background-color: #000;
  background-image: url(../images/arrow-dropdown1.png);
  background-position: 25px 50%;
  background-repeat: no-repeat;
  color: #fff;
  font-size: 0.9em;
}
/* クリックして開くメニューのスタイル */
.dropdown-menu > .item {
  display: none;
  margin: 2px 0 0 0;
  width: 150px;
  position: absolute;
}
.dropdown-menu > .items li a {
  display: block;
  padding: 5px 0;
  background: #a2a2a2;
  color: #fff;
  font-size: 0.9em;
  text-align: center;
}

.accordion > li {
  cursor: pointer;
  margin: 0 0 5px 0;
  padding: 25px 10px;
  border-radius: 5px;
  background-color: #ededed;
  background-image: url(../images/arrow-down.png);
  background-position: bottom center;
  background-repeat: no-repeat;
}

.accordion > li:hover {
  background-color: #ddd;
}

.accordion > li > h2 {
  font-weight: normal;
}

.accordion > li .content {
  display: none;
}

/* アコーディオンが開いたときのスタイル */
.accordion > li.expanded {
  background-color: #ddd;
  background-image: url(../images/arrou-up.png);
}

.accordion > li.expanded > h2 {
  font-weight: bold;
}

.accordion > li.expanded .content {
  margin: 10px 0 0 0;
  padding: 10px 0 0 0;
  border-top: solid 1px #fff;
}

$(function(){
  $('.dropdown-menu').children('a')
  .on('click', function(){
    var $this = $(this);
    if($this.hasClass('open')) {
      $this.removeClass('open')
      .next().hide();
      $('html').off('click', closeItems);
    } else {
      $this.addClass('open')
      .next().show();
      $('html').on('click', closeItems);
      funvtion closeItems() {
        $this.removeClass('open')
        .next().hide();
       }
  });
});

class属性を状態の評価に使う

スクリプトは<li class=”dropdpwn-menu”>の中にある<a>がクリックされたら処理を開始する。
変数$thisに代入される要素は<a href=”#”>LANGUAGE</a>である。
クリックされた時点で、<a href=”#”>LANGUAGE</a>にopenクラスがあればそれを削除し、さらにつぎの要素<ul class=”items”>の次の<li>を非表示にする。
<a href=”#”>LANGUAGE</a>にopenクラスがなければ追加し、次の<li>を表示する。
dynamic.cssに記述したCSSにはマッチするルールがないことから、openくらすはCSSのために追加したり削除したりするわけではない。
ドロップダウンメニューが表示されているかいないかをスクリプトで判断するために使用している。
hasClass()、removeClass()、addClass()、jQueryにはクラスを操作する便利なメソッドが用意されている。

hasClass(‘クラス名’)

hasClass()は、要素()内で指定したクラスがついているかどうか評価する。クラスがついていれば、true、ついていなければfalse。

.next(‘セレクタ’)

対象要素と同階層にある次の要素を取得する。()内にセレクタを含めると、次の要素がそのセレクタにマッチするときだけ取得できるようになる。

.show(速度)、.hide(速度)

show()要素を表示、hide()は要素を非表示にする。どちらも()内にパラメータを含めることができ、そくどのパラメータがある場合は、表示/非表示の際にアニメーションする、パラメータがない場合はアニメーションしない。