2

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

情况：

我有一个特定的 CMS（photostore 脚本）。它有一个类别菜单项。类别可以由用户添加，并由管理员移动和删除。因此，结构和层次结构正在发生变化。输出导致级联 UL/LI。我不能也不会更改任何核心 PHP 文件，所以我猜想解析 UL/LI，并添加必要的引导 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">

如果一个子类别 LI 包含一个新的 UL……它只需要：

<li class="dropdown-submenu">

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

引导示例结构如下所示：

<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 级和下拉效果。因此，整个菜单显示为展开的树。

4

3 回答 3

2

将引导菜单更改为示例 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");
于 2013-09-16T17:06:04.260 回答
0

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

这就是接近...

$('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");
于 2014-06-20T17:20:33.320 回答
0

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

$(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上的工作示例

于 2013-04-24T12:30:41.600 回答