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

此代码有效。试试这个。

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

1 个答案: