如何在点击时切换嵌套列表的可见性？

Question

I have a nested lists: 我有一个嵌套列表：

<ol id="warningType">
<li id="Other">Other
   <ul class="toggle_menu">
   <li>Create() is conflict with Delete() when you are creating.</li>
   <li>View() must have the same parent with Delete().</li>
   </ul>
</li>
<li id="Input">Input
   <ul class="toggle_menu">
   <li>Get() can be the input of Create().</li>
   </ul>
</li>
<li id="Exception">Exception
   <ul class="toggle_menu">
   <li>If you forget to delete all elements, Post() will throw Error A.</li>
   <li>View() will throw IllegalException.</li>
   </ul>
</li>
</ol>

I would like to click "Other""Input" and "Exception" to get or hide the nested list. 我想单击“其他”“输入”和“异常”以获取或隐藏嵌套列表。 Any help with it would be appreciated. 任何帮助，将不胜感激。

Answer 1

Are you looking for something like this accordion : 您是否正在寻找类似这种手风琴的东西：

https://www.w3schools.com/howto/howto_js_accordion.asp https://www.w3schools.com/howto/howto_js_accordion.asp

<!DOCTYPE html>
<html>
<head>
<style>
button.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

button.accordion.active, button.accordion:hover {
    background-color: #ddd;
}

div.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}
</style>
</head>
<body>

<h2>Animated Accordion</h2>
<p>Click on the buttons to open the collapsible content.</p>

<button class="accordion">Section 1</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Section 2</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Section 3</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  }
}
</script>

</body>
</html>

Answer 2

It is called Accordion, and actually it's not neccessary to insert tag into li tag. 它被称为手风琴，实际上没有必要在li标签中插入标签。 Here is example. 这是例子。 Your html: 您的html：

<ul class="accordion">
    <li>
        <h3>Section 1</h3>
        <p>Text 1 of  this section Lorem ipsum.</p>
    </li>

    <li>
        <h3>Section 2</h3>
        <p>Text 1 of  this section Lorem ipsum.</p>
    </li>

    <li>
        <h3>Section 3</h3>
        <p>Text 1 of  this section Lorem ipsum.</p>
    </li>
</ul>

Css: CSS：

* {
    box-sizing: border-box;
}

body {
    width: 100%;
    margin: 0 auto;
    background: #009788;
}

ul.accordion {
    list-style-type: none;
    width: 40%;
    padding: 0px;
    margin: 5% auto 0 auto;;
}

.accordion > li {
    width: 100%;
    display: block;
}

.accordion li > h3 {
    background: #f5f5f5;
    text-align: center;
    margin: 0;
    border-bottom: 2px solid #d6d6d6;
    cursor: pointer;
    padding: 10px 0px;
    font-size: 24px;
}

.accordion li > h3:hover {
    background: #ccc;
}

.accordion li > h3:after {
    content: "+";
    float: right;
    margin-right: 2%;
}

.accordion li > p {
    display: none;
    background: #fff;
    padding: 10px;
    border-bottom: 2px solid #d6d6d6;
    font-size: 20px;
    margin: 0;
}

.accordion li h3.active:after {
    content: "-";
    float: right;
    margin-right: 2%;
}

and Jquery code: 和Jquery代码：

$(document).ready(function() {
    $('h3').click(function(){
        $(this).toggleClass('active');
        $(this).siblings().not(':animated').slideToggle();
    });
});

Answer 3

You can achieve this via accordion 您可以通过手风琴来实现

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse1"> Other</a> </h4> </div> <div id="collapse1" class="panel-collapse collapse in"> <div class="panel-body"> <ul class="toggle_menu"> <li>Create() is conflict with Delete() when you are creating.</li> <li>View() must have the same parent with Delete().</li> </ul></div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse2"> Input</a> </h4> </div> <div id="collapse2" class="panel-collapse collapse"> <div class="panel-body"><ul class="toggle_menu"> <li>Get() can be the input of Create().</li> </ul></div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse3"> Exception</a> </h4> </div> <div id="collapse3" class="panel-collapse collapse"> <div class="panel-body"><ul class="toggle_menu"> <li>If you forget to delete all elements, Post() will throw Error A.</li> <li>View() will throw IllegalException.</li> </ul></div> </div> </div> </div>

This is using bootstrap's collapsible accordion 这是使用bootstrap的可折叠手风琴

如何在点击时切换嵌套列表的可见性？

问题描述

3 个解决方案

解决方案1
0 2017-09-27 05:31:24

解决方案2
0 2017-09-27 05:44:07

解决方案3
0 2017-09-27 05:48:28

如何在点击时切换嵌套列表的可见性？

问题描述

3 个解决方案

解决方案1 0 2017-09-27 05:31:24

解决方案2 0 2017-09-27 05:44:07

解决方案3 0 2017-09-27 05:48:28

解决方案1
0 2017-09-27 05:31:24

解决方案2
0 2017-09-27 05:44:07

解决方案3
0 2017-09-27 05:48:28