如何过滤手风琴菜单的内容？

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";
    }
  });
}