jquery - div 内のすべての Li を選択する

Question

div 内のすべての li アイテムに背景色を設定する必要があります。li がレンダリングされるときに SharePoint が作成されるため、リストアイテムにアクセスするのに苦労しています。各 li は、sharepoint サーバーコントロールレンダリングの結果です。これは基本的に、6 つのメニュー項目が水平に配置されたトップナビゲーションであり、一部の項目にはサブメニュー項目もあります。

すべてのリスト項目に bgcolor を設定し、ホバー時に背景色を変更し、マウスアウト時に元の色に戻す必要があります。

<div id="zz16_HDRNav" class="s4-tn">
    <div class="menu horizontal menu-horizontal">
        <ul class="root static">
            <li class="static">
                <a class="static menu-item" href="/">
                    <span class="additional-background">
                    <span class="menu-item-text">Home</span></span>
                </a>
            </li>
            <li class="static dynamic-children">
                <a class="static dynamic-children menu-item" href="/finance">
                    <span class="additional-background">
                    <span class="menu-item-text">Employee Center</span></span>
                </a>
                <ul class="dynamic">
                    <li class="dynamic">
                        <a class="dynamic menu-item" href="/finance/EMEA"><span class="additional-background">
                            <span class="menu-item-text">Benefits</span></span>
                        </a>
                    </li>
                    <li class="dynamic">
                        <a class="dynamic menu-item" href="/finance/APAC"><span class="additional-background">
                            <span class="menu-item-text">Travel</span></span>
                        </a>
                    </li>
                    <li class="dynamic">
                        <a class="dynamic menu-item" href="/finance/CORP">
                            <span class="additional-background"><span class="menu-item-text">TSO</span></span>
                        </a>
                    </li>
                </ul>
            </li>
            <li class="static">
                <a class="static menu-item" href="/team">
                    <span class="additional-background">
                    <span class="menu-item-text">Business Communities</span></span>
                </a>
            </li>
            <li class="static dynamic-children">
                <span class="static dynamic-children menu-item"><span class="additional-background"><span class="menu-item-text">Internal Services</span></span></span>
                <ul class="dynamic">
                    <li class="dynamic">
                        <a class="dynamic menu-item" href="/regions/NA">
                            <span class="additional-background"><span class="menu-item-text">North America</span></span>
                        </a>
                    </li>
                    <li class="dynamic">
                        <a class="dynamic menu-item" href="/regions/me">
                            <span class="additional-background"><span class="menu-item-text">Middle East</span></span>
                        </a>
                    </li>
                </ul>
            </li>
            <li class="static">
                <a class="static menu-item" href="/it">
                    <span class="additional-background"><span class="menu-item-text">Best Practices</span></span>
                </a>
            </li>
            <li class="static">
                <a class="static menu-item" href="/legal">
                    <span class="additional-background"><span class="menu-item-text">PolicyProcedures</span></span>
                </a>
            </li>
        </ul>
    </div>
</div>

score 2 · Accepted Answer

これにより、div内のすべてのliの背景色が設定されます

$('#YourdivId').find('li').hover(function () {
                            $(this).css({ 'background-color': 'gray' });
                        }, function () { $(this).css({ 'background-color': '' }); });

score 2 · Accepted Answer

CSSで：

#zz16_HDRNav li{
       background-color: your color;
}

#zz16_HDRNav li:hover{
       background-color: your color;
}

score 2 · Accepted Answer

おそらくhover()メソッドを使用し、ホバースタイルにクラスを利用する必要があります。このようなもの：

$("#zz16_HDRNav li").hover(
    function() {
        $(this).addClass('yourHoverClass');
    },
    function() {
        $(this).removeClass('yourHoverClass');
    }
);

これはjQueryソリューションですが、他の回答で述べたように、私は個人的にホバー条件にストレートCSSを使用しようとしています。

score 1 · Accepted Answer

CSS：

ul.dynamic {display:none}
.root li { width:auto; float:left; margin:4px; display:block;}
.menu { width:780px}
.yourclass { background:#ffbbcc; color:#aaffcc;}
.root li.dynamic { width:100px; clear:left}
li.dynamic:hover { background:#aaffcc;color:#ffbbcc;}

JavaScript：

jQuery('li.static').live('hover', function() {
    jQuery('li.static').find("ul.dynamic").hide();
    jQuery('li.static').removeClass('yourclass');       
    jQuery(this).addClass('yourclass');
    jQuery(this).find("ul.dynamic").show();
});

jsfiddle

score 1 · Accepted Answer

CSSではなくjQueryを使用してこれを行う必要がある場合は、クラスを使用して行います。

$('div li').css({'background-color':'red'})
       .hover(function(){ 
             $(this).toggleClass('hover')
             });

そしてcssで：

.hover{
    background-color: green;
}

score 1 · Accepted Answer

これは、第 1 レベルの LI 項目を処理する必要があります。

div.s4-tn div.menu ul.root li.static {
    background-color:red;
}

div.s4-tn div.menu ul.root li.static:hover {
    background-color:blue;
}

score 1 · Accepted Answer

そのためには、いくつかのストレートな CSS を使用できます。

#zz16_HDRNav>.menu>ul>li
{
    background-color:gray;
}
#zz16_HDRNav>.menu>ul>li :hover
{
    background-color:red;
}

フィドル: http://jsfiddle.net/johnkoer/XgExk/7/

score 0 · Accepted Answer

jQuery を使用する理由 CSSを使用するだけです：

div li {
background-color:#CCC;
}

div li:hover {
background-color: #AAA;
}

score 0 · Accepted Answer

0

このような何かがうまくいくはずです！http://jsfiddle.net/BnJ3G/2/

乾杯

于 2012-08-13T14:40:39.923 に答える

jquery - div 内のすべての Li を選択する

9 に答える 9

Related

Reference