2

私の問題はjQueryで解決できると思います。

状況：

特定の CMS (フォトストア スクリプト) があります。カテゴリメニュー項目があります。カテゴリはユーザーが追加でき、管理者が移動および削除できます。そのため、構造と階層が変化しています。出力はカスケード UL/LI になります。コア PHP ファイルを変更することはできませんし、変更するつもりもないので、UL/LI を解析し、必要なブートストラップ CSS クラスを追加することは良い代替手段です。それは理にかなっていますか？

ヒント：

メインナビはUL/LIそのもの！このメイン ナビゲーションには、3 つの UL/LI サブメニュー項目が含まれています。次のカテゴリの UL はその 1 つです。特別なクラスも ID もありません。他の 2 つのサブメニューを傷つけたり触れたりしないでください。

主要なサンプル カテゴリ メニュー構造は次のようになります。

<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 でのみ必要です。コア スクリプトは出力ルーチンで 1 つの 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 に答える