jQuery クリックで表示させたUIを、UIの表示領域以外をクリックして非表示にする

ウィンドウの右端もしくは左端などに配置され、クリックするとメニューが表示されるようなUI(ドロワーメニュー)で、表示されるメニュー以外の領域をクリックするとメニューを隠す挙動をjQueryで試したのでメモ。

動作サンプル

動作デモ

Light Boxで画像ウィンドウの外側をクリックすると、画像ウィンドウが非表示になるのと同じような動きです。

コード

HTML

<div id="wrapper">
  <div id="menu">menu</div>
  <div id="menuContent">
    <ul>
      <li>menu1</li>
      <li>menu2</li>
      <li>menu3</li>
      <li>menu4</li>
    </ul>
  </div>
</div>

CSS

#wrapper {
  margin: 0 auto;
  width: 960px;
}
#menu {
  width: 48px;
  height: 48px;
  line-height: 48px;
  color: #FFF;
  text-align: center;
  font-weight: 700;
  background-color: orange;
}
#menuContent {
  width: 200px;
  height: 100%;
  background-color: #363636;
  color: #FFF;
  position: fixed;
  top: 0;
  left: -200px;
  z-index: 100;
}
#menuContent ul {
  margin: 0;
}
  #menuContent li {
    list-style-type: none;
  }
    #menuContent li a {
      padding: 8px;
      color: #fff;
      display: block;
    }
    #menuContent li a:hover {
      background-color: #F4FBF9;
      color: #232327;
    }
.dummy {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0;
}

Script

$(function() {
  $('#menu').click(function() {
    $('#menuContent').animate({left: '0'}, 200);
    $('body').append('<p class="dummy"></p>');
  });
  $('body').on('click', '.dummy', function() {
    $('#menuContent').animate({left: '-200px'}, 200);
    $('p.dummy').remove();
  });
});

ポイント

まず、#menuをクリックした時、#menuContentを表示させる処理と同時にp.dummyをbody要素に追加するようにしています。そして、p.dummyは縦横100%表示にcssで設定。背景色を指定しなければ見た目だけではp.dummyが追加されたことはわかりません。また、#menuContentのcssでz-indexを指定して他の要素より前面に出しておくことでp.dummyより前にある状態が作れるので、#menuContentの表示領域内だけはクリックしても非表示になりません。これで#menuContent以外をクリックするとメニュー表示を非表示にする挙動になります。

つまづいたところ

当初は「#menuContent以外をクリックしたとき」にイベントが発動すると考えていたため、セレクタを $(document).not(‘#menuContent’) と指定していましたが、そうすると#menuをクリックした段階でセレクタの条件が満たされ、表示されたメニューがすぐに閉じられてしまいました。
プラグインを使えばこの辺は気にしなくてもケアしてくれてるので、自分でやってみてとても勉強になりました。