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

Question

我有以下代码片段:

$(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-toggle attr 中定义的 id 的元素。

你知道为什么吗？

Answer 1

$(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">

这段代码有效。试试这个。