代码之家 › 专栏 › 技术社区 › Dimitrios Desyllas

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

html jquery javascript

Dimitrios Desyllas · 技术社区 · 7 年前

我有以下片段:

$(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 菜单项发生这种情况的原因是它无法获取在中定义ID的元素 data-sidebar-toggle 阿特尔

你知道为什么吗?

1 回复 | 直到 7 年前

VSM 7 年前

$(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之前(项目11)。

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

此代码有效。试试这个。

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

7 月前

Dr.0000FF · jQuery按钮点击不显示/隐藏内容

7 月前

user28928120 · 如何在jquery中选择所有类?

8 月前

LauraNMS · 如何使用Waypoints js实现粘性元素和偏移量

8 月前