如何筛选手风琴菜单的内容?

Question

我在弄清楚如何过滤手风琴菜单时遇到了一些困难.目前，它只显示菜单的名称，而不显示它的内容。我想知道是否可以同时搜索菜单的名称和内容，如果是，如何显示它(自动打开它(。

function sidebarSearch() {
// Declare variables
var input, filter, nav, li, a, i;
input = document.getElementById("sidebarSearch"); // Grab the Search Field
filter = input.value.toUpperCase(); // Change typed text to Upper Case (thus eliminating case sensitivity)
nav = document.getElementById("sidebarNav"); // Grab Link Container
li = nav.getElementsByTagName("li"); // Grab Link Items
// Loop through all list items, and hide those who don't match the search query
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
// Declare variables
var sidebarLinks = document.getElementsByClassName("sidebarLinks");
var i;
for (i = 0; i < sidebarLinks.length; i++) {
sidebarLinks[i].addEventListener("click", function() {
// Toggle between adding and removing the "active" class
this.classList.toggle("active");
// Toggle between hiding and showing the active Menu
var sidebarMenu = this.nextElementSibling;
if (sidebarMenu.style.maxHeight) {
sidebarMenu.style.maxHeight = null;
sidebarMenu.style.padding = "0px 0px";
} else {
sidebarMenu.style.maxHeight = sidebarMenu.scrollHeight + "px";
sidebarMenu.style.padding = "10px 0px";
}
});
}

html,
body {
height: 100%;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
color: #ffffff;
}
a:active,
a:link,
a:hover,
a:visited,
li,
ul {
text-decoration: none;
color: #ffffff;
margin: 0;
/* padding: 0; */
}
::-webkit-scrollbar {
width: 0;
}
input[type="text"] {
-webkit-box-sizing: border-box; // Safari/Chrome, other WebKit
-moz-box-sizing: border-box; // Firefox, other Gecko
box-sizing: border-box; // Opera/IE 8+
}
.wrapper {
display: grid;
/* grid-template-columns: 1fr 5fr; */
height: 100%;
background: linear-gradient(150deg, #282533 15%, #506367 70%, #58675e 95%)
}
.sidebar {
display: grid;
grid-template-rows: 0fr 1fr;
overflow-y: hidden;
}
.sidebarHeader,
.sidebarContent {
margin: 10px;
padding: 10px;
border: 2px solid #ffffff;
}
.sidebarContent {
overflow-y: hidden;
}
.sidebarSearch {
width: 100%;
font-size: 16px;
margin-bottom: 10px;
}
.sidebarNav {
height: 100%;
list-style-type: none;
padding: 0;
margin: 0;
overflow-y: scroll;
}
.sidebarLinks {
margin: 10px 0;
padding: 10px 0;
display: block;
text-align: center;
}
.sidebarLinks.active {
box-shadow: 2px 0px 0px 0px #00a2ff inset;
}
.sidebarLinks:hover {
/* border-left: 5px solid #00a2ff; */
box-shadow: 2px 0px 0px 0px #00a2ff inset;
}
.sidebarMenu {
display: flex;
flex-wrap: wrap;
justify-content: center;
max-height: 0;
overflow: hidden;
text-align: center;
transition: max-height 0.25s ease-out, padding 0.25s ease-out;
}
.sidebarMenuLinks {
margin: 5px;
padding: 5px;
width: 100%;
border: 2px solid #00a2ff;
word-break: break-word;
cursor: pointer;
}

<div class="wrapper">
<div class="sidebar">
<div class="sidebarHeader">
Sidebar Header
</div>
<div class="sidebarContent">
<input type="text" class="sidebarSearch" id="sidebarSearch" onkeyup="sidebarSearch()" placeholder="Search.." title="Sidebar Topic Search">
<nav class="sidebarNav" id="sidebarNav">
<li>
<a class="sidebarLinks" href="#">Link 1</a>
<nav class="sidebarMenu">
<li class="sidebarMenuLinks"><a href="#">Link 1.1</a></li>
<li class="sidebarMenuLinks"><a href="#">Link 1.2</a></li>
<li class="sidebarMenuLinks"><a href="#">Link 1.3</a></li>
<li class="sidebarMenuLinks"><a href="#">Link 1.4</a></li>
<li class="sidebarMenuLinks"><a href="#">Link 1.5</a></li>
</nav>
</li>
<li>
<a class="sidebarLinks" href="#">Link 2</a>
<nav class="sidebarMenu">
<li class="sidebarMenuLinks"><a href="#">Link 2.1</a></li>
<li class="sidebarMenuLinks"><a href="#">Link 2.2</a></li>
<li class="sidebarMenuLinks"><a href="#">Link 2.3</a></li>
<li class="sidebarMenuLinks"><a href="#">Link 2.4</a></li>
<li class="sidebarMenuLinks"><a href="#">Link 2.5</a></li>
</nav>
</li>
<li>
<a class="sidebarLinks" href="#">Link 3</a>
<nav class="sidebarMenu">
<li class="sidebarMenuLinks"><a href="#">Link 3.1</a></li>
<li class="sidebarMenuLinks"><a href="#">Link 3.2</a></li>
<li class="sidebarMenuLinks"><a href="#">Link 3.3</a></li>
<li class="sidebarMenuLinks"><a href="#">Link 3.4</a></li>
<li class="sidebarMenuLinks"><a href="#">Link 3.5</a></li>
</nav>
</li>
<li>
<a class="sidebarLinks" href="#">Link 4</a>
<nav class="sidebarMenu">
<li class="sidebarMenuLinks"><a href="#">Link 4.1</a></li>
<li class="sidebarMenuLinks"><a href="#">Link 4.2</a></li>
<li class="sidebarMenuLinks"><a href="#">Link 4.3</a></li>
<li class="sidebarMenuLinks"><a href="#">Link 4.4</a></li>
<li class="sidebarMenuLinks"><a href="#">Link 4.5</a></li>
</nav>
</li>
<li>
<a class="sidebarLinks" href="#">Link 5</a>
<nav class="sidebarMenu">
<li class="sidebarMenuLinks"><a href="#">Link 5.1</a></li>
<li class="sidebarMenuLinks"><a href="#">Link 5.2</a></li>
<li class="sidebarMenuLinks"><a href="#">Link 5.3</a></li>
<li class="sidebarMenuLinks"><a href="#">Link 5.4</a></li>
<li class="sidebarMenuLinks"><a href="#">Link 5.5</a></li>
</nav>
</li>
<li><a class="sidebarLinks" href="#">Link 6</a></li>
<li><a class="sidebarLinks" href="#">Link 7</a></li>
<li><a class="sidebarLinks" href="#">Link 8</a></li>
<li><a class="sidebarLinks" href="#">Link 9</a></li>
<li><a class="sidebarLinks" href="#">Link 10</a></li>
</nav>
</div>
</div>
</div>

Answer 1

我已经修改了代码，以便它搜索内容和菜单。

现在，代码在搜索时显示所有内容并对其进行筛选，以便知道要显示的内容和要隐藏的内容。当搜索栏为空时，所有内容将隐藏，并显示所有菜单名称。

修改后的JavaScript代码

function sidebarSearch() {
var nav, li
nav = document.getElementById("sidebarNav"); // Grab Link Container
li = nav.getElementsByTagName("li"); // Grab Link Items
if (document.getElementById("sidebarSearch").value != "") {
// Declare variables
var input, filter, a, i;
input = document.getElementById("sidebarSearch"); // Grab the Search Field
filter = input.value.toUpperCase(); // Change typed text to Upper Case (thus eliminating case sensitivity)
sidebarMenu = document.getElementsByClassName("sidebarMenu");
for (i = 0; i < sidebarMenu.length; i++) {
sidebarMenu[i].style.maxHeight = sidebarMenu.scrollHeight + "px";
sidebarMenu[i].style.padding = "10px 0px";
}
// Loop through all list items, and hide those who don't match the search query
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
li[i].getElementsByTagName("a")[0].style.display = "";
} else {
li[i].getElementsByTagName("a")[0].style.display = "none";
}
}
for (i = 0; i < document.getElementsByClassName("sidebarMenuLinks").length; i++) {
a = document.getElementsByClassName("sidebarMenuLinks")[i];
console.log(a);
if (a.getElementsByTagName("a")[0].innerHTML.toUpperCase().indexOf(filter) > -1) {
a.style.display = "";
a.parentElement.style.maxHeight = a.parentElement.scrollHeight + "px";
a.parentElement.style.padding = "10px 0px";
} else {
a.style.display = "none";
}
}
} else {
a = document.getElementsByClassName("sidebarMenuLinks");
sidebarLinks = document.getElementsByClassName("sidebarLinks");
for (i = 0; i < a.length; i++) {
a[i].style.display = "";
a[i].parentElement.style.maxHeight = null;
a[i].parentElement.style.padding = "0px 0px";
}
for (i = 0; i < li.length; i++) {
li[i].getElementsByTagName("a")[0].style.display = "";
}
for (i = 0; i < sidebarLinks.length; i++) {
if (sidebarLinks[i].classList.contains("active")) {
var sidebarMenu = sidebarLinks[i].nextElementSibling;
sidebarMenu.style.maxHeight = sidebarMenu.scrollHeight + "px";
sidebarMenu.style.padding = "10px 0px";
}
}
}
}
// Declare variables
var sidebarLinks = document.getElementsByClassName("sidebarLinks");
var i;
for (i = 0; i < sidebarLinks.length; i++) {
sidebarLinks[i].addEventListener("click", function() {
// Toggle between adding and removing the "active" class
this.classList.toggle("active");
// Toggle between hiding and showing the active Menu
var sidebarMenu = this.nextElementSibling;
if (sidebarMenu.style.maxHeight) {
sidebarMenu.style.maxHeight = null;
sidebarMenu.style.padding = "0px 0px";
} else {
sidebarMenu.style.maxHeight = sidebarMenu.scrollHeight + "px";
sidebarMenu.style.padding = "10px 0px";
}
});
}