时间戳

首页 > 解决方案 > 自定义侧边栏嵌套菜单。我无法打开嵌套菜单

javascript - 自定义侧边栏嵌套菜单。我无法打开嵌套菜单

问题描述

我有以下片段：

$(function() {

  $('.menu-open').click(function(e) {
    e.preventDefault();
    var href = $(this).attr("data-sidebar-toggle");
    console.log(href);
    href = document.getElementById(href);
    console.log(href);
    $(href).slideToggle("slow");
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="nav flex-column">
  <a class="nav-link text-light menu-open" href="#" data-sidebar-toggle="#collapseExample"><span>Item 1</span></a>
  <div id="#collapseExample" class="sidebar-menu">
    <nav class="nav flex-column">
      <a class="nav-link text-light menu-open" href="#" data-sidebar-toggle="#item11"><i class="fa fa-user" aria-hidden="true"></i>&nbsp;<span>Item 1-1</span></a>
      <div id="item11" class="sidebar-menu">
        <nav class="nav flex-column">
          <a class="nav-link"> Hello </a>
        </nav>
      </div>
      <a class="nav-link text-light" href="#item-1-2"><span>Item 1-2</span></a>
    </nav>
  </div>
  <a class="nav-link active text-light border-bottom-0 border-light" href="#"><span>Item 2</span></a>
</nav>

但是，当我单击Item 1侧边栏链接项时，它设法打开和关闭它，而当我单击item1-1链接时，它无法切换Hello菜单项，发生这种情况的原因是因为它无法获取具有在data-sidebar-toggleattr中定义的 id 的元素.

你知道为什么吗？

标签： javascriptjqueryhtml

解决方案

$(function() {

  $('.menu-open').click(function(e) {
    e.preventDefault();
    var href = $(this).attr("data-sidebar-toggle");
    console.log(href);
    href = document.getElementById(href);
    console.log(href);
    $(href).slideToggle("slow");
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="nav flex-column">
  <a class="nav-link text-light menu-open" href="#" data-sidebar-toggle="#collapseExample"><span>Item 1</span></a>
  <div id="#collapseExample" class="sidebar-menu">
    <nav class="nav flex-column">
      <a class="nav-link text-light menu-open" href="#" data-sidebar-toggle="#item11"><i class="fa fa-user" aria-hidden="true"></i>&nbsp;<span>Item 1-1</span></a>
      <div id="#item11" class="sidebar-menu">
        <nav class="nav flex-column">
          <a class="nav-link"> Hello </a>
        </nav>
      </div>
      <a class="nav-link text-light" href="#item-1-2"><span>Item 1-2</span></a>
    </nav>
  </div>
  <a class="nav-link active text-light border-bottom-0 border-light" href="#"><span>Item 2</span></a>
</nav>

更新您的代码，如下所示。您#在 id(item11) 之前错过了。

<a class="nav-link text-light menu-open" href="#" data-sidebar-toggle="#item11"><i class="fa fa-user" aria-hidden="true"></i>&nbsp;<span>Item 1-1</span></a>
  <div id="#item11" class="sidebar-menu">

此代码有效。试试这个。

推荐阅读