Question

我认为我的问题可以通过jQuery解决。

情况：

我有一个CMS（photostore脚本）。它有一个类别菜单项。用户可以添加类别，管理员可以移动和删除类别。因此，结构和层次结构正在发生变化。输出产生级联UL / LI。我不能也不会改变任何核心PHP文件，所以我想解析UL / LI，并添加必要的bootstrap CSS类是一个很好的选择。它有意义吗？

提示：

主导航是UL / LI本身！该主导航包括3个UL / LI子菜单项。以下类别UL是其中之一。它没有特殊的课程，也没有ID！另外两个子菜单不应受到伤害/触及。

核心样本类别菜单结构如下所示：

<ul>
<li><a href="/category/nature.html" title="Nature">Nature</a>
    <ul>
        <li><a href="/category/animals.html" title="Animals">Animals</a>
        <ul>
        <li><a href="/category/birds.html" title="Birds">Birds</a></li>
        <li><a href="/category/cats.html" title="Cats">Cats</a></li>
        </ul>
        </li>
    </ul>
</li>
<li><a href="/category/test.html" title="Test">Test</a></li>
<li><a href="/category/cities.html" title="Cities">Cities</a>
    <ul>
      <li><a href="/category/architecture.html" title="Architecture">Architecture</a</li>
      <li><a href="/category/firenze.html" title="Firenze">Firenze</a></li>
      <li><a href="/category/venezia.html" title="Venezia">Venezia</a></li>
    </ul>
</li>
<li><a href="/category/movies.html" title="Movies">Movies</a></li>
<li><a href="/category/sounds.html" title="Sounds">Sounds</a></li>
<li><a href="/category/illustrations.html" title="Illustrations">Illustrations</a>
    <ul>
<li><a href="/category/vector.html" title="Vector">Vector</a></li>
    </ul>
</li>
<li><a href="/category/misc.html" title="Misc">Misc</a></li>
</ul>

问题：

是否可以在客户端应用Bootstrap CSS类？即使在动态结构上？ http://twitter.github.com/bootstrap/components.html#dropdowns

创意1和任务：

我只需要FIRST UL上的这个课程。重要的是在FIRST上添加它，因为核心脚本在输出例程中使用单个UL。

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">

如果SUBcategory LI包含新的UL ......它只需要：

<li class="dropdown-submenu">

似乎bootstrap子菜单需要一个额外的链接（a-tag）。在UL子菜单之前插入。

bootstrap示例结构如下所示：

<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
  ...
  <li class="dropdown-submenu">
    <a tabindex="-1" href="#">More options</a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
</ul>

创意2和任务：

如果想法1是复杂的或不可预测的。它应该使用更简单的解决方案。只有1级和下拉效果。因此，整个菜单显示为展开的树。

Answer 1

将bootstrap菜单更改为示例ul li菜单

 $('ul li:has(ul)').addClass('dropdown');
 $('ul li:has(ul) ul').addClass('dropdown-menu');
 $('ul li a:has(ul)').addClass('dropdown-toggle');
 $(".dropdown a").attr("data-toggle", "dropdown");
 $(".dropdown-menu a").removeAttr("data-toggle", "dropdown");

Answer 2

您可以在客户端执行此操作而不会出现任何问题。例如：

$(function(){        

    $("ul").addClass("dropdown-menu");    

    var menu = $("ul").first()               
            .attr("role", "menu")
            .attr("aria-labelledby", "dropdownMenu")

    $("a").attr("tabindex", "-1");    

    $("li").has("ul").addClass("dropdown-submenu");   

    $("<div/>").addClass("dropdown clearfix").appendTo("body").append($(menu));

});

请参阅jsFiddle

上的工作示例

Answer 3

有人找到合适的解决方案吗？我正在努力完成同样的事情，到目前为止最后的解决方案已经接近但它没有添加插入符号，并想知道是否有更好的解决方案。

这就是接近......

$('ul li:has(ul)').addClass('dropdown');
$('ul li:has(ul) ul').addClass('dropdown-menu');
$('ul li a:has(ul)').addClass('dropdown-toggle');
$(".dropdown a").attr("data-toggle", "dropdown");
$(".dropdown-menu a").removeAttr("data-toggle", "dropdown");

jQuery - 将bootstrap下拉类添加到现有的UL LI菜单结构中

3 个答案: