Question

我有一个嵌套列表：

<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>

我想点击“其他”“输入”和“例外”来获取或隐藏嵌套列表。任何帮助都将不胜感激。

Answer 1

您是否在寻找类似这种手风琴的东西：

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

它被称为Accordion，实际上并不需要将标签插入li标签。这是一个例子。你的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：

* {
    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%;
}

和Jquery代码：

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

Answer 3

你可以通过手风琴实现这个目标

<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>

这是使用bootstrap的可折叠手风琴

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

3 个答案: