使用jquery动态添加子菜单项？

Question

$(function(){

     $('[data-toggle="tooltip"]').tooltip();

     $(".side-nav .collapse").on("hide.bs.collapse", function() 
     {   
      $(this).prev().find(".fa").eq(1).removeClass("fa-angle-right").addClass("fa-angle-down");
     });

      $('.side-nav .collapse').on("show.bs.collapse", function() 
      {                                    
        $(this).prev().find(".fa").eq(1).removeClass("fa-angle-down").addClass("fa-angle-right");        
      });

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />

<div class="collapse navbar-collapse navbar-ex1-collapse">
    <ul class="nav navbar-nav side-nav">
        <li>
            <a href="investigaciones/favoritas"><i class="fa fa-fw fa-user-plus"></i>Dashboard</a>
        </li>
        <li>
            <a href="#" data-toggle="collapse" data-target="#submenu-1">
                <i class="fa fa-fw fa-search"></i> Hosts <i class="fa fa-fw fa-angle-down pull-right"></i>
            </a>
            <ul id="submenu-1" class="collapse">
                <li><a href="#"><i class="fa fa-angle-double-right"></i> SUBMENU 1.1</a></li>
                <li><a href="#"><i class="fa fa-angle-double-right"></i> SUBMENU 1.2</a></li>
                <li><a href="#"><i class="fa fa-angle-double-right"></i> SUBMENU 1.3</a></li>
            </ul>
        </li>
    </ul>
</div>

我有一个侧面导航栏，其中的菜单包含子菜单项。当使用 jquery 单击菜单项时，我必须动态添加子菜单项，但这对我不起作用。

我想使用 jquery 来点击菜单，比如 onclick 函数，还想动态添加列表项。 我有 array=[submenu1, submenu2, submenu3] 并想使用 jquery 将其附加到我的菜单子项中。

Answer 1

将 append() 用于您的 <ul> 。 它可能看起来像：

array.forEach(function(item, index){
   let newSubMenu = document.createElement("li");
   let textContent = document.createTextNode(item);
   newSubMenu.appendChild(textContent);
   $('#submenu-1').append(newSubMenu );
});

或者您可以选择将 HTML 模板存储为字符串并附加

array.forEach(function(item, index){
   let newSubMenu = `<li><a href="#"><i class="fa fa-angle-double-right"></i> ${item}</a></li>`
   $('#submenu-1').append(newSubMenu );
});