0

サブメニューがある水平メニューもあり、サブメニューがある場合は、親メニューのホバー効果で背景色を変更したいだけです。

この例のようにhttp://jsfiddle.net/YA2Yz/11/

上記の例では、目的の効果を得るためにハードコーディングしhas-submenuていますが、問題は、実際のメニューがデータベースから動的に生成されることです。これまでのところhas-submenu、コード自体からクラスを割り当てて機能させる方法を見つけることができませんでした。

私が探している解決策は、jqueryを使用して、サブメニューを持つ要素のみに新しいCSSクラスを追加することです。

この要素を見つける方法がわかりません <li><span class="dir"><a href="#">CATEGORIES</a></span><span id="menus-spacer">|</span>

jQueryを使用してクラスを変更dirしますhas-submenu <li><span class="has-submenu"><a href="#">CATEGORIES</a></span><span id="menus-spacer">|</span>

このjsFiddleリンクには、上記のリンク例に示すように、目的の結果を得るために変更したい実際のコードがあります。

http://jsfiddle.net/YA2Yz/10/

HTML コード:

<div id="nav-wrapper">
    <ul class="dropdown dropdown-linear" id="nav">
        <li class="active"><span class="dir"><a href="#">HOME</a></span><span id="menus-spacer">|</span></li>
        <li><span class="dir"><a href="#">ABOUT US</a></span><span id="menus-spacer">|</span></li>
        <li><span class="dir"><a href="#">ARTICLES</a></span><span id="menus-spacer">|</span></li>
        <li><span class="dir"><a href="#">CATEGORIES</a></span><span id="menus-spacer">|</span>
            <ul>
                <li><a href="#">Politics</a><span id="menus-spacer">|</span></li>
                <li><a href="#">Feature</a><span id="menus-spacer">|</span></li>
                <li><a href="#">Economy</a><span id="menus-spacer">|</span></li>
                <li><a href="#">Feature</a><span id="menus-spacer">|</span></li>
                <li><a href="#">Business</a><span id="menus-spacer">|</span></li>
            </ul>
        </li>   
        <li><span class="dir"><a href="#">ARCHIVE</a></span><span id="menus-spacer">|</span>
            <ul>
                <li><a href="#">2013</a><span id="menus-spacer">|</span></li>
                <li><a href="#">2012</a><span id="menus-spacer">|</span></li>
                <li><a href="#">2011</a><span id="menus-spacer">|</span></li>
                <li><a href="#">2010</a><span id="menus-spacer">|</span></li>
                <li><a href="#">2009</a><span id="menus-spacer">|</span></li>
            </ul>
        </li>
        <li><span class="dir"><a href="#">NEWS</a></span><span id="menus-spacer">|</span></li>
    </ul>
</div>
4

4 に答える 4

1

これは簡単な方法です。ラップされているドキュメント準備完了関数は、ページの読み込みが完了したときにそれを正しく実行するよう jQuery に指示するだけです。

$(document).ready(function() { 
  $("#nav-wrapper ul li span").removeClass("dir").addClass("has-submenu");
});

http://jsfiddle.net/YA2Yz/16/

jQuery は css と同じメソッドを使用して要素を選択するため、#nav-wrapper ul li span は css セレクターと同じように機能し、#nav-wrapper 内の ul 内の li 内のすべてのスパンをターゲットにします。

#nav-wrapper ul li span{
  }
于 2013-05-20T06:02:36.717 に答える
1

これを試して：-

デモ

$(function () {
     $('#nav > li').on('mouseenter mouseleave', function () {
        if ($(this).find('ul').length > 0) {
            $(this).find('.dir').toggleClass('has-submenu');
        }
    });

});
于 2013-05-20T05:57:11.867 に答える
0 
$(document).ready(function(){
    $("#nav li").each(function() {
    if($(this) .has('ul')) {
      $(this).addClass('has-submenu');   
    }
    });  
});

または、php を使用する場合は、メニューを生成する php コードを表示する必要があります。

于 2013-05-20T05:56:34.117 に答える