隐藏和显示 div<li> 使用 JS 的元素</li>

Question

The first column is displayed by default.默认显示第一列。 If I click on the "1" I want to display "1.1, 1.2, 1.3" and then if I click on "1.1" display "1.1.1, 1.1.2, 1.1.3", but if I click on "1.2" hide the "1.1.1, 1.1.2, 1.1.3" and display "1.2.1, ...".如果我点击“1”我想显示“1.1,1.2,1.3”然后如果我点击“1.1”显示“1.1.1,1.1.2,1.1.3”，但如果我点击“1.2 " 隐藏 "1.1.1, 1.1.2, 1.1.3" 并显示 "1.2.1, ..."。 If I click on "2" hide "1.1, 1.2, 1.3" and hide "1.2.1, ..." and display "2.1, 2.2".....如果我点击“2”隐藏“1.1,1.2,1.3”并隐藏“1.2.1,...”并显示“2.1,2.2”.....

This is always nested in 3 layers.这总是嵌套在 3 层中。

The HTML code have to look like as I wrote in my scource code. HTML 代码必须看起来像我在源代码中写的那样。

It will not be a menu system.它不会是一个菜单系统。

I do not have any idea how to make this work.我不知道如何使这项工作。

index.html索引.html

<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>$(document).ready(function(){$("#load").attr("src","table.html");});</script>
</head>
<body>
    <div id="page">
        <iframe width="100%" height="100%" frameborder="0" id="load" src="table.html" ></iframe>
    </div>
</body>
</html>

table.html表.html

<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div>   
    <div class="main">

        <div class="First">
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
        </div>

        <div class="Second">
            
            <div class="S_1">
                <li><a href="#">1.1</a></li>
                <li><a href="#">1.2</a></li>
                <li><a href="#">1.3</a></li>
            </div>

            <div class="S_2">
                <li><a href="#">2.1</a></li>
            </div>

        </div>

        <div class="Third">
            
            <div class="T_1">
                
                <div class="T_1.1">
                    <li>1.1.1</li>
                    <li>1.1.2</li>
                </div>
                ....

            </div>
            ....
        </div>


    </div>
</div>
</body>
</html>

style.css样式.css

* {margin: 0px;padding: 0px;}
li {list-style: none;}
.main {display:flex;justify-content: center;}
.First {background:green;width:33.33vw;}
.Second {background:gold; width:33.33vw;}
.Third {background:gray;width:33.33vw;}

Answer 1

A solution which builds the concept from first class:从第一个 class 构建概念的解决方案：

 var $sel = $(".First li"); var nbr = $sel.length; var lastval =""; $sel.clone().appendTo(".Second").clone().appendTo(".Third"); $(".main div:not([class=First])").hide(); $(document).on("click", "li", function() { var val = $(this).text(); var l = val.length; if(lastval == val || l > 3) return; lastval = val; switch(val.length){ case 1: $(".main div").show().last().hide(); $(".Second li").map((i, e) => $(e).find("a").text(val + "." + (i + 1))); break; case 3: $(".Third").show().find("li").map((i, e) => $(e).find("a").text(val + "." + (i + 1))); break; } });

 * { margin: 0px; padding: 0px; } li { list-style: none; }.main { display: flex; justify-content: left; }.First { background: green; width: 33.33vw; }.Second { background: gold; width: 33.33vw; }.Third { background: gray; width: 33.33vw; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <div class="main"> <div class="First"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </div> <div class="Second"> </div> <div class="Third"> </div> </div> </div>

Answer 2

Basically, this is the scrap code where you can start.基本上，这是您可以开始的废代码。 It is simple logic.这是简单的逻辑。 The code is creating HTML and changing the other div's HTML.该代码正在创建 HTML 并更改其他 div 的 HTML。

 $(document).ready(function(){ $('body').on('click', 'a', function() { var number = $(this).html(); var parent = $(this).parent().parent().attr('class'); var htmlss = ''; var i; if(parent == 'First'){ $('.Second').html(''); $('.Third').html(''); for(i = 1; i < 4; i++) { htmlss += '<li><a href=#>' + number + '.' + i +'</a></li>'; } $('.Second').html(htmlss); } else if (parent == 'Second'){ $('.Third').html(''); for(i = 1; i < 4; i++) { htmlss += '<li><a href=#>' + number + '.' + i +'</a></li>'; } $('.Third').html(htmlss); } }); });

 * {margin: 0px;padding: 0px;} li {list-style: none;}.main {display:flex;justify-content: center;}.First {background:green;width:33.33vw;}.Second {background:gold; width:33.33vw;}.Third {background:gray;width:33.33vw;}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <html> <head> <link rel="stylesheet" type="text/css" href="style.css"/> </head> <body> <div> <div class="main"> <div class="First"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> </div> <div class="Second"> </div> <div class="Third"> </div> </div> </div> </body> </html>

Answer 3

Here is a pure JavaScript solution.这是一个纯JavaScript解决方案。 I did not touch the HTML as that was declared forbidden, so I had to come up with some js mumbo jumbo to get the initial layout.我没有触摸HTML因为它被宣布为禁止，所以我不得不想出一些js mumbo jumbo 来获得初始布局。 Following is a working snippet:以下是一个工作片段：

 function clickMe(id) { let query; if (id.length == 1) { query = document.querySelector(".S_1"); second.style.opacity = 1; third.style.opacity = 0; } else if (id.length == 3) { query = document.querySelector(".T_1").children[0]; selector = ".T_1.1"; third.style.opacity = 1; } [...query.children].forEach((node, i) => { node.innerText = `${id}.${i + 1}`; }); } const hideNotUseful = document.querySelector(".S_2").remove(); const first = document.querySelector(".First"); const thirdChild = document.createElement("li"); thirdChild.innerText = 3; first.append(thirdChild); const second = document.querySelector(".Second"); const third = document.querySelector(".Third"); second.style.opacity = 0; third.style.opacity = 0; [...first.children, ...second.children[0].children].forEach(node => { node.addEventListener("click", e => clickMe(node.innerText)); });

 * { margin: 0px; padding: 0px; } li { list-style: none; }.main { display: flex; justify-content: center; }.First { background: green; width: 33.33vw; }.Second { background: gold; width: 33.33vw; }.Third { background: gray; width: 33.33vw; }

 <div> <div class="main"> <div class="First"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> </div> <div class="Second"> <div class="S_1"> <li><a href="#">1.1</a></li> <li><a href="#">1.2</a></li> <li><a href="#">1.3</a></li> </div> <div class="S_2"> <li><a href="#">2.1</a></li> </div> </div> <div class="Third"> <div class="T_1"> <div class="T_1.1"> <li>1.1.1</li> <li>1.1.2</li> <li>1.1.3</li> </div> </div> </div> </div> </div>

隐藏和显示 div<li> 使用 JS 的元素</li>

问题描述

3 个解决方案

解决方案1
4 已采纳 2021-03-11 16:24:38

解决方案2
2 2021-03-10 09:06:06

解决方案3
2 2021-03-11 10:49:48

隐藏和显示 div<li> 使用 JS 的元素</li>

问题描述

3 个解决方案

解决方案1 4 已采纳 2021-03-11 16:24:38

解决方案2 2 2021-03-10 09:06:06

解决方案3 2 2021-03-11 10:49:48

解决方案1
4 已采纳 2021-03-11 16:24:38

解决方案2
2 2021-03-10 09:06:06

解决方案3
2 2021-03-11 10:49:48