slideToggleを用いサイドバーのメニューを開閉する

はじめに

以下のコードについて解説をする。

解説

Javascript

元のコードを抜粋し解説する。

<div class="aside-module" data-logic-class="blog-part" data-part-type="category" data-part-number="2">
<div class="aside-module-title-body"></div>
<div class="aside-module-body"></div>
</div>
next()
兄弟要素(同じ階層の要素)で次の要素だけけを選択。
  • タイトルをクリックすると動作。
  • thisはクリックした要素(.aside-module-title-body)を示す。
  • next()は次の要素(.aside-module-body)を示す。
  • 結果、クリックの都度、.aside-module-bodyが開閉する。
$(function() {
$('[data-part-type="category"] .aside-module-title-body').click(function() {
$(this).next().slideToggle(500);
});
});

要素そのもので記述すると理解し易い。

$(function() {
$('[data-part-type="category"] .aside-module-title-body').click(function() {
$('[data-part-type="category"] .aside-module-body').slideToggle(500);
});
});

CSS

position:absolute
絶対位置への配置となります。
親ボックスにpositionプロパティのstatic以外の値が指定されている場合には、親ボックスの左上が基準位置となります。
親ボックスにpositionプロパティのstatic以外の値が指定されていない場合には、ウィンドウ全体の左上が基準位置となります。

上述から、[data-part-type="category"] > .aside-module-title-body:after(子)の基準位置は、[data-part-type="category"](親)が基準位置となる。

Javascript

開閉時にアイコンを切替える。
toggleClassで閉じた際、classを追加する。
$(function() {
$('[data-part-type="category"] .aside-module-title-body').click(function() {
$('[data-part-type="category"] .aside-module-title').toggleClass('close');
$('[data-part-type="category"] .aside-module-body').slideToggle(500);
});
});

CSS

Fontawesomeを用いアイコンを表示。

[data-part-type="category"] .aside-module-body {
display : none;
}
[data-part-type="category"] .aside-module-title:before {
content : "\f107";
}
[data-part-type="category"] .aside-module-title.close:before {
content : "\f106";
}

まとめ

一つ一つのコードを整理し正しく理解しないと、トンチンカンなことに。