0

HTMLコードで簡単な例を挙げると下記の感じです。
上のリストのいずれかをクリックすると下の選択したクラス以外を非表示にし、
選択したものだけを表示する絞り込みの様な機能を作りたいです。

<section class="container">
    <div class="content1">
        <ul class="color1">
            <li>赤リスト1</li>
            <li>赤リスト2</li>
            <li>赤リスト3</li>
        </ul>
    </div>

    <div class="content2">
        <ul class="color2">
            <li>青リスト1</li>
            <li>青リスト2</li>
            <li>青リスト3</li>
        </ul>
    </div>
</section>

<section class="colors">
    <div class="red">
        <div class="red1">
            <h2></h2>
            <img src="">
            <p></p>
        </div>

        <div class="red2">
            <h2></h2>
            <img src="">
            <p></p>
        </div>

        <div class="red3">
            <h2></h2>
            <img src="">
            <p></p>
        </div>
    </div>

    <div class="blue">
        <div class="blue1">
            <h2></h2>
            <img src="">
            <p></p>
        </div>

        <div class="blue2">
            <h2></h2>
            <img src="">
            <p></p>
        </div>

        <div class="blue3">
            <h2></h2>
            <img src="">
            <p></p>
        </div>
    </div>
</section>
1
  • このHTMLだけでは画面のイメージをつかむのは困難です。最低限でも、画面を表示できるCSSと画面要素をご提供いただければ、回答しやすくなりますので、今後ご質問される場合は、ご検討いただければと思います。
    – Kouki.W
    2020年7月23日 0:06

1 件の回答 1

0

こんちには、はじめまして。

ご質問の内容にはたくさんの実現内容があると思います。ここでは、jQueryを使用した実現方法を紹介します。VueやReactを利用される方がモダンかもしれません。

CSS/JS/HTMLを含む全体のコードは長くなりますのでスニペットを利用しています。
2パターンを作成しました。

最後にクリックされた要素のみ表示(こちらがご説明の内容に近いかと思います)

// 要素mycontainer以下のliを取得してクリックに反応するようにします

var lists = $(".mycontainer li");

lists.each(function(idx,li){
 $(li).on("click",()=>{
     //切り替え対象のボックスをa-toggle属性の文字列からセレクタを作成して切り替え
        var box = $(".colors>"+$(this).attr("a-toggle"));
    $(".colors div div").hide();
    $(box).toggle();
    //表示されているかわかりやすくするためリストの文字の太さを切り替え
    lists.css('font-weight','normal');
    $(this).css('font-weight','bold'); 
 });
});
body {
  background: #fff;
  padding: 0px;
  margin: 10px;
  font-family: Helvetica;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 0x 0x;
  font-size: 15px;
  color: #fff;
}
h2 {
  color:white;
}

.colors > div > div {
  display:none;
}
.red {
  background:#fff;
  display:flex;
}
.red div {
  min-width:150px;
  max-width:150px;
  text-align:center;
}
.red1 {
  background:#f99;
}
.red2 {
  background:#f66;
}
.red3 {
  background:#f33;
}
.blue {
  background:#fff;
  display:flex;
}
.blue div {
  min-width:150px;
  max-width:150px;
  text-align:center;
}
.blue1{
  background:#99f;
}
.blue2{
  background:#66f;
}
.blue3 {
  background:#33f;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="mycontainer">
    <div class="content1">
        <ul class="color1">
            <li a-toggle=".red .red1">Toggle R1</li>
            <li a-toggle=".red .red2">Toggle R2</li>
            <li a-toggle=".red .red3">Toggle R3</li>
        </ul>
    </div>

    <div class="content2">
        <ul class="color2">
            <li a-toggle=".blue .blue1">Toggle B1</li>
            <li a-toggle=".blue .blue2">Toggle B2</li>
            <li a-toggle=".blue .blue3">Toggle B3</li>
        </ul>
    </div>
</section>

<section class="colors">
    <div class="red">
        <div class="red1">
            <h2>R1</h2>
            <img src="">
            <p></p>
        </div>

        <div class="red2">
            <h2>R2</h2>
            <img src="">
            <p></p>
        </div>

        <div class="red3">
            <h2>R3</h2>
            <img src="">
            <p></p>
        </div>
    </div>

    <div class="blue">
        <div class="blue1">
            <h2>B1</h2>
            <img src="">
            <p></p>
        </div>

        <div class="blue2">
            <h2>B2</h2>
            <img src="">
            <p></p>
        </div>

        <div class="blue3">
            <h2>B3</h2>
            <img src="">
            <p></p>
        </div>
    </div>
</section>

https://jsfiddle.net/kkww413/dba6ku9f/173/

クリックされた要素をトグルして表示、個人的にはこちらの方が「絞り込み」のイメージに近いです

var lists = $(".mycontainer li");

lists.each(function(idx,li){
 $(li).on("click",()=>{
     //切り替え対象のボックスをa-toggle属性の文字列からセレクタを作成して切り替え
        var box = $(".colors>"+$(this).attr("a-toggle"));
    $(box).toggle();
    //表示されているかわかりやすくするためリストの文字の太さを切り替え
    if ($(box).is(':visible')) {
        $(this).css('font-weight','bold'); 
    } else {
        $(this).css('font-weight','normal');
    }

 });
});
body {
  background: #fff;
  padding: 0px;
  margin: 10px;
  font-family: Helvetica;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 0x 0x;
  font-size: 15px;
  color: #fff;
}
h2 {
  color:white;
}

.colors > div > div {
  display:none;
}
.red {
  background:#fff;
  display:flex;
}
.red div {
  min-width:150px;
  max-width:150px;
  text-align:center;
}
.red1 {
  background:#f99;
}
.red2 {
  background:#f66;
}
.red3 {
  background:#f33;
}
.blue {
  background:#fff;
  display:flex;
}
.blue div {
  min-width:150px;
  max-width:150px;
  text-align:center;
}
.blue1{
  background:#99f;
}
.blue2{
  background:#66f;
}
.blue3 {
  background:#33f;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="mycontainer">
    <div class="content1">
        <ul class="color1">
            <li a-toggle=".red .red1">Toggle R1</li>
            <li a-toggle=".red .red2">Toggle R2</li>
            <li a-toggle=".red .red3">Toggle R3</li>
        </ul>
    </div>

    <div class="content2">
        <ul class="color2">
            <li a-toggle=".blue .blue1">Toggle B1</li>
            <li a-toggle=".blue .blue2">Toggle B2</li>
            <li a-toggle=".blue .blue3">Toggle B3</li>
        </ul>
    </div>
</section>

<section class="colors">
    <div class="red">
        <div class="red1">
            <h2>R1</h2>
            <img src="">
            <p></p>
        </div>

        <div class="red2">
            <h2>R2</h2>
            <img src="">
            <p></p>
        </div>

        <div class="red3">
            <h2>R3</h2>
            <img src="">
            <p></p>
        </div>
    </div>

    <div class="blue">
        <div class="blue1">
            <h2>B1</h2>
            <img src="">
            <p></p>
        </div>

        <div class="blue2">
            <h2>B2</h2>
            <img src="">
            <p></p>
        </div>

        <div class="blue3">
            <h2>B3</h2>
            <img src="">
            <p></p>
        </div>
    </div>
</section>

https://jsfiddle.net/kkww413/dba6ku9f/160/

2
  • 1
    外部のスニペットを利用しているのはなぜでしょう?スタックオーバーフローにもスニペット記述ができるのでそちらを利用した方がサイトで完結してサイトがある限り回答が残るのでよいと思いますが
    – keitaro_so
    2020年7月23日 1:44
  • すいません、はい、使い方がわからないので、のちほど調べて修正しますね。
    – Kouki.W
    2020年7月23日 2:20

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。