PC表示でマウスオーバーで展開するプルダウンメニュー、スマホ表示でアコーディオンメニューを使ってコンテンツの絞り込み検索をします。絞り込み検索の条件はカスタムデータ属性の一致を利用します。
メニュー部分のCSSとjQueryは下記の記事と同様です。コンテンツ非表示用のCSSと絞り込み検索用のjQueryのみ追加で実装します。
htmlのコードは下記になります。
メニューのaタグに任意のカスタムデータ属性を追加します。今回はdata-filter=”カテゴリ名”とします。「全て」のaタグのみdata-filter=””にします。
表示するコンテンツのdivタグ側にも任意のカスタムデータ属性を追加します。今回はメニューのaタグ同様data-filter=”カテゴリ名”とします。
<ul class="dropmenu">
<li id="js_cat"><a>カテゴリー</a>
<ul>
<li><a data-filter="">全て</a></li>
<li><a data-filter="cat01">アコーディオンメニュー</a></li>
<li><a data-filter="cat02">カレンダー</a></li>
<li><a data-filter="cat03">タブメニュー</a></li>
<li><a data-filter="cat04">ツールチップ</a></li>
<li><a data-filter="cat05">フェーダー</a></li>
<li><a data-filter="cat06">フォーム</a></li>
<li><a data-filter="cat07">マウスオーバー</a></li>
<li><a data-filter="cat08">モーダルウィンドウ</a></li>
<li><a data-filter="cat09">レスポンシブ</a></li>
</ul>
</li>
</ul>
<div class="cat_image_all">
<div class="cat_image" data-filter="cat08">
<a href="/modal/modal-pattern05/">
<img src="modal-pattern05.png" alt="">
<p class="page_title">【モーダルウィンドウ】jquery.magnific-popup.jsを利用してYouTubeの動画を再生</p>
</a>
</div>
<div class="cat_image" data-filter="cat05">
<a href="/fade/fade-pattern11/">
<img src="fade-pattern11.png" alt="">
<p class="page_title">【フェーダー】左から右へカーテンを開くように画像を順番に表示</p>
</a>
</div>
<div class="cat_image" data-filter="cat08">
<a href="/modal/modal-pattern04/">
<img src="modal-pattern04.png" alt="">
<p class="page_title">【モーダルウィンドウ】プラグインを利用してhtml内のソースを表示【jquery.magnific-popup.js】</p>
</a>
</div>
</div>続いてCSSのコードです。
コンテンツのdivタグにクラス名is-hideが付与された時のみ、display: noneにします。
.cat_image.is-hide {
display: none;
}最後にjQueryのコードです。
メニューのaタグがクリックされた時の動作になります。まずdataメソッドを利用してカスタムデータ属性の値を変数groupに格納し、関数search_filterへ値を渡します。
関数search_filterでは一度コンテンツのdivタグ全てからクラス名is-hideを削除して、全てのコンテンツを表示状態にします。そして変数groupが空の場合、つまりメニューのaタグのカスタムデータ属性が空の場合のみ、returnで関数を抜けて全てのコンテンツの表示状態を維持します。変数groupが空でなかった場合は変数groupとコンテンツのdivタグのカスタムデータ属性を比較して、一致しない場合のみコンテンツのdivタグにクラス名is-hideを付与して非表示にします。
var searchItem = '.dropmenu li ul li a';
var listItem = '.cat_image';
var hideClass = 'is-hide';
$(function() {
function search_filter(group) {
$(listItem).removeClass(hideClass);
if(group === '') {
return;
}
for (var i = 0; i < $(listItem).length; i++) {
var itemData = $(listItem).eq(i).data('filter');
if(itemData !== group) {
$(listItem).eq(i).addClass(hideClass);
}
}
}
$(searchItem).on('click', function() {
var group = $(this).data('filter');
search_filter(group);
});
});