基于 html 结构构建 sidenav 菜单

Question

我正在尝试通过一些简单的导航为我的 Django 项目构建文档模板。 HTML的一般结构是这样的：

div.page-container#overview
   h3.page-header
   div
      h4.section-title
      div.section-wrapper
          h5.section-subtitle

div.page-container#documentation
   h3.page-header
   div
      h4.section-title
      div.section-wrapper
          h5.section-subtitle

...

基于生成的 HTML，我想要一个与页面上的 headers 具有相同结构的侧边导航。这就是我想要的：

HTML
-----------------
div.page-container#overview
   h3.page-header="Overview" -----------------|
   div                                        |
      h4.section-title="Introduction" --------|
      div.section-wrapper                     |
          h5.section-subtitle="System" -------|
             <p>....</p>                      |
          h5.section-subtitle="User" ---------|
             <p>....</p>                      |
                                              |
SideBar                                       |
-----------------                             |
Overview         <----------------------------|
  Introduction   <----------------------------|
    System    <-------------------------------|
    User   <----------------------------------|
Documentation                                 |
  ...
    ...

我正在尝试使用 JQuery 遍历 html，但我无法正确设置导航结构。

这是我的资料：

function buildSideNav() {
    $('.page-container').each(function() {
        var container = $(this);
        $(container).find('.page-header').each(function() {
            $('#sidebar-tree').append(`<a href="#${$(this).attr('id')}">${$(this).text()}</a>`);

            $(container).find('.section-title').each(function() {
                $('#sidebar-tree').append(`<a class="ml-2" href="#${$(this).attr('id')}">${$(this).text()}</a>`);

                $(container).find('.section-subtitle').each(function() {
                    $('#sidebar-tree').append(`<a class="ml-4" href="#${$(this).attr('id')}">${$(this).text()}</a>`);
                });
            });
        });
    })
}

我确定我的 JQuery 是错误的，但我似乎无法让它正常工作。任何帮助将不胜感激。

Answer 1

您需要将值放入 <li> 标记内以生成该结构。目前，在你的代码中你只有一个 page-header & section-title 所以你不需要在那里使用循环，只需将它用于 section subtitle 。然后，无论何时附加新元素，都将它们放在 li 标签内。

演示代码 :

var htmls = ""; //declare this
$('.page-container').each(function() {
  var container = $(this);
  //get page-header and put inside ul > `li`
  htmls += `<ul><li><a href="#${$(container).find('.page-header').attr('id')}">${ $(container).find('.page-header').text()}</a><ul>`
  //get section-title put inside li > ul > li
  htmls += `<li><a class="ml-2" href="#${ $(container).find('.section-title').attr('id')}">${  $(container).find('.section-title').text()}</a><ul>`
  //loop through subtitle and put inside ul > li > ul > li > ul > li
  $(container).find('.section-subtitle').each(function() {
    htmls += `<li><a class="ml-4" href="#${$(this).attr('id')}">${$(this).text()}</a></li>`
  });
  //close all tags
  htmls += `</ul></li></ul></li></ul>`
})
$('#sidebar-tree').html(htmls) //add inside sidebarss.

.page-container {
  display: none
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="page-container">
  <h3 class="page-header">Overview</h3>
  <div>
    <h4 class="section-title">Introduction</h4>
    <div class="section-wrapper">
      <h4 class="section-subtitle">System</h4>
      <h4 class="section-subtitle">User</h4>
    </div>
  </div>

</div>
<div class="page-container">
  <h3 class="page-header">Documentation</h3>
  <div>
    <h4 class="section-title">Sss</h4>
    <div class="section-wrapper">
      <h4 class="section-subtitle">Soemthings</h4>
      <h4 class="section-subtitle">Soemthingsd1</h4>
    </div>
  </div>
</div>
<div id="sidebar-tree">
</div>

基于 html 结构构建 sidenav 菜单

Building sidenav menu based on html structure

html

javascript

jquery

sidebar