TransWikia.com

HTML,CSS,JavaScriptを使用して メニューで選択したもの以外の項目を非表示にしたいです。

スタック・オーバーフロー Asked by Makoto Tanaka on November 25, 2021

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

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

    <div class="content2">
        <ul class="color2">
            <li>青リスト１</li>
            <li>青リスト２</li>
            <li>青リスト３</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>
csshtmljavascript

One Answer

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

ご質問の内容にはたくさんの実現内容があると思います。ここでは、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/

Answered by Kouki.W on November 25, 2021

Add your own answers!

Ask a Question

Get help from others!

Recent Questions

Recent Answers

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP