定番
新着
履歴

jQuery 一覧の絞り込みのサンプル

サンプル
コード

選択した条件のみ表示する

  • Blue
  • Red
A
B
C
© 2024 kipure
Top


<style>
.links     {clear:both;}
.links li  {display: inline-block;width: 80px;margin-bottom: 10px;}
.links2    {clear:both;}
.links2 li {display: inline-block;width: 80px;margin-bottom: 10px;}
.cate {clear:both;	margin:10px;}
.cate li{
	float:left;
	width:80px;
	height:96px;
	margin:5px;
}
.cate li.m{
	background-color:#99F;
}
.cate li.f{
	background-color:#F99;
}
.actv {
background:#EE4400;
}
</style>

<script>
cnt= 0;
cnt2= 0;

$(document).ready(function(){
  clickAction();
});

function clickAction(){
  $('.btnf1').click(function() {
    my_id = $(this).attr("id");
    open(my_id);
  });
  $('.btnf2').click(function() {
    my_id = $(this).attr("id");
    open2(my_id);
  });
}

function open(myid){
	if(cnt==0){
		$('.cate').css('display','none');
	}

	$('#cate_'+myid).toggle();
	$('#'+myid).toggleClass('actv');
	cnt++;

	if(0 == $(".links .actv").size()){
		$('.cate').show();
		cnt= 0;
	}
}


function open2(myid){
	if(cnt2==0){
		$('.m').css('display','none');
		$('.f').css('display','none');
	}

    if(myid=='s1'){
		$('.m').toggle();
    }else{
		$('.f').toggle();
    }
	$('#'+myid).toggleClass('actv');
	cnt2++;

	if(0 == $(".links2 .actv").size()){
		$('.f').show();
		$('.m').show();
		cnt2= 0;
	}
}
</script>


<h1>選択した条件のみ表示する</h1>

<ul class="links">
	<li class="btn btnf1" id="c1">A</li>
	<li class="btn btnf1" id="c2">B</li>
	<li class="btn btnf1" id="c3">C</li>
</ul>

<ul class="links2">
	<li class="btn btnf2" id="s1">Blue</li>
	<li class="btn btnf2" id="s2">Red</li>
</ul>

<div id="cate_c1" class="cate">
	<div class="name">A</div>
	<ul>
		<li class="m"></li>
		<li class="m"></li>
		<li class="f"></li>
		<li class="f"></li>
		<li class="m"></li>
		<li class="f"></li>
	</ul>
</div>


<div id="cate_c2" class="cate">
	<div class="name">B</div>
	<ul>
		<li class="m"></li>
		<li class="f"></li>
		<li class="m"></li>
		<li class="m"></li>
		<li class="f"></li>
		<li class="m"></li>
	</ul>
</div>


<div id="cate_c3" class="cate">
	<div class="name">C</div>
	<ul>
	<li class="f"></li>
	<li class="m"></li>
	<li class="f"></li>
	<li class="m"></li>
	<li class="f"></li>
	<li class="f"></li>
	</ul>
</div>