68847


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

[code]

    <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>
    
[/code]


CC BY-SA 4.0
2020-07-22T13:05:04.613
68835
2020-07-23T03:04:40.427
2020-07-22T13:19:12.263
3060
40520
question
javascript html css
HTML,CSS,JavaScriptを使用して メニューで選択したもの以外の項目を非表示にしたいです。


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

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

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

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

[code]

    // 要素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'); 
     });
    });
[/code]

[code]

    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;
    }
[/code]

[code]

    <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>
[/code]

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

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

[code]

    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');
        }
    
     });
    });
[/code]

[code]

    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;
    }
[/code]

[code]

    <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>
[/code]

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


CC BY-SA 4.0
2020-07-23T00:04:59.837
68847
2020-07-23T03:04:40.427
2020-07-23T03:04:40.427
37777
37777
68835
answer