Bootstrap CSS class 未应用动态 <li>

Question

我有一个水平菜单，其中有 dropdowns。我需要动态注释掉的 dropdown-menu 中的 li。所以我添加了 div 并考虑在 jQuery 中附加带有动态 <li> 的 div。

HTML

<li class="dropdown">
 <ul class="dropdown-menu" role="menu">
    <%-- <li ><a href="Link1">Link1</a></li>
         <li ><a href="Link2">Link2</a></li>
    --%>
    <div id="dvLinks"></div>
   </ul> 
 </li>

jQuery

var invDiv = '';
$.each(result, function (i, value) {
   invDiv += '<li><a href=' + result.href + '>' + Links + '</a></li>'; 
});

$('#dvLinks').append(invDiv);

从上面，我得到了结果，但是class="dropdown-menu"不适用于这些动态li的。由于技术上 <ul> 中不允许 <div>，所以我在下面尝试了。但这并没有给我任何 UI 的结果。请帮忙，我哪里错了。

<li class="dropdown"> 
    <div id="dvLinks"></div> 
  </li>

var invDiv = '<ul class="dropdown-menu" role="menu">';

$.each(result, function (i, value) {
   invDiv += '<li><a href=' + result.href + '>' + Links + '</a></li>'; 
});

invDiv += '</ul>'

$('#dvLinks').append(invDiv);

Answer 1

只需将 LI 字符串附加到 UL 元素，此处不需要 div：

<li class="dropdown">
    <ul class="dropdown-menu" role="menu" id="dvLinks"></ul> 
</li>

和JS一样，只是现在$('#dvLinks')指向UL:

var invLi = '';
$.each(result, function (i, value) {
   invLi += '<li><a href=' + result.href + '>' + Links + '</a></li>'; 
});

$('#dvLinks').append(invLi);

Bootstrap CSS class 未应用动态 <li>

Bootstrap CSS class not applying on dynamic <li>

css

jquery

twitter-bootstrap-3