整列しているリストをクリックで項目ごとに絞り込み表示

Webデザイン

flexboxで整列して並んでいるリスト全体からクリックした項目で絞り込み表示させる方法です。
ボタンをクリックしたらjQueryを利用して表示非表示を処理しています。

デモページはこちら

ソースコード

HTML

<ul id="select-nav">
	<li><a href=".all" class="selected">すべて</a></li>
	<li><a href=".movie">映画</a></li>
	<li><a href=".music">音楽</a></li>
	<li><a href=".book">書籍</a></li>
</ul>
<ul id="list">
	<li class="music">
		<p>音楽</p>
		<div></div>
	</li>
	<li class="movie">
		<p>映画</p>
		<div></div>
	</li>
	<li class="book">
		<p>書籍</p>
		<div></div>
	</li>
				
	<!-- 中略 -->

	<li class="music">
		<p>音楽</p>
		<div></div>
	</li>
	<li></li>
	<li></li>
	<li></li>
</ul>

CSS

#select-nav {
	display: flex;
	justify-content: center;
	list-style: none;
	padding-top: 25px;
}
#select-nav li {
	margin: 0 10px;
}
#select-nav a {
	display: block;
	padding: 7px 15px;
	text-decoration: none;
	background: #ccc;
	color: #fff;
}
#select-nav a:hover {
	background: #666;
	color: #fff;
}
#select-nav a.selected{
	background: #666;
}
#list {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	list-style: none;
	width: 1000px;
	margin: 20px auto;
}
#list li {
	box-sizing: border-box;
	flex: 0 0 24%;
	border: 1px solid #ccc;
	margin-bottom: 10px;
}
#list li:empty {
	border: none;
}
#list p {
	padding: 5px;
	font-size: 12px;
	text-align: center;
	color: #fff;
}
.movie p {
	background: #f60;
}
.music p {
	background: #093;
}
.book p {
	background: #36c;
}
#list div {
	height: 150px;
	background: #fcfcfc;
}

JavaScript

$(function(){
	$('#select-nav a').click(function(){
		//何が選択されているかを表示するための処理
		$('#select-nav a.selected').removeClass('selected');
		$(this).addClass('selected');
		//空のli要素を消す
		$('#list li:empty').remove();
		//すべてのli要素を非表示
		$('#list li').hide();
		//クリックしたa要素のhref属性の内容で分岐
		if($(this).attr('href') === '.all'){
			//.allだった場合はすべての#list li要素を表示
			$('#list li').show();
		}else{
			//それ以外はhref属性に書かれたクラスだけ表示
			$($(this).attr('href')).show();
		}
		//#list li要素の最後の行が４つになるように必要に応じて空のli要素を挿入
		while(parseInt($('#list li:visible').length)%4 != 0){
			$('#list').append('<li></li>');
		}
		return false;
	});
});

簡単な解説

表示の切り替え

#select-navのa要素をクリックしたら処理を開始します。

$('#select-nav a').click(function(){
	//ここに処理を書く	
});

まずはこの部分で空のli要素を消し、残ったli要素はすべて非表示にします。
ちなみに、なぜ空のli要素があるのかというとflexboxをjustify-content: space-between;で並べているため、その行のli要素の数が合わないとレイアウトが崩れてしまうからです。

//空のli要素を消す
$('#list li:empty').remove();
//すべてのli要素を非表示
$('#list li').hide();

次に非表示になったli要素をクリックしたa要素のhref属性に従って処理していきます。
この処理に利用するのでクリックするa要素のhref属性には表示させたいクラス名を入れておきましょう。
「すべて」の場合はなんでもいいのですが、ここでは.allを入れています。
if文を使って「すべて」がクリックされた場合はすべてのli要素を表示。
それ以外はhref属性を取得して、そのクラス名だけを表示させます。

//クリックしたa要素のhref属性の内容で分岐
if($(this).attr('href') === '.all'){
	//.allだった場合はすべての#list li要素を表示
	$('#list li').show();
}else{
	//それ以外はhref属性に書かれたクラスだけ表示
	$($(this).attr('href')).show();
}

これでクリックした項目だけを絞り込み表示することができます。
しかし、さきほどもちらっと出ましたが、今回はflexboxで並べたリストをjustify-content: space-between;と設定しているため、最後の行のli要素の数が合っていないとレイアウトが崩れてしまいます。
そこで最後にli要素の数に応じて空のli要素を挿入する処理を加えています。

//#list li要素の最後の行が４つになるように必要に応じて空のli要素を挿入
while(parseInt($('#list li:visible').length)%4 != 0){
	$('#list').append('<li></li>');
}

表示されているli要素の数を.length()を使って取得。
今回は１行につきli要素を４つ並べているので、取得した数値を４で割り切れれば最後の行にも４つ並んでいることになります。
なのでwhile文とappend()を使い、余りが０になるまで.li要素を挿入します。

おわりに

たくさん並んでいる要素に対してちょっと絞り込み機能が欲しいな、というときに使えそうです。
プルダウンで選べるようにするなど、工夫しだいでよりよくなると思うのでお試しください。

コメント

ホーム
トップ