0

<ul>タグで使用される背景画像「セレクター」があります。<ul>メニュー項目が選択されたときにクラス Lightselector を呼び出す jquery 関数があります。ライト セレクター クラスは<li>タグによってレンダリングされますが、私の問題は、<li>タグの背景イメージ (ライトセレクター クラス) が<ul>イメージ 'セレクター' の背景イメージと重なることです。z-index と background position を試しました。

HTML:

<ul>BUMPER STICKERS
    <li>hello </li>
    <li>This is a paragraph.</li>
</ul>
<ul>BUMPER STICKERS
    <li>This is a paragraph.</li>
    <li>This is a paragraph.</li>
</ul>

<li>ライトセレクター:

.LightSelector {
    background-image: url(../Images/Template%20Images/Lightblue.png);
    background-position:0% 0%;
    background-repeat: no-repeat;
}

<ul>背景画像:

ul {
    background-image: url(../Images/Template%20Images/selector.png);
    background-position:13% 102%;
    background-repeat: no-repeat;
}

jQuery:

$(document).ready(function () {
    $("ul").click(function (evt) {      
        if (evt.target.tagName != 'UL') return;
        $("li", this).toggle();
    });
});
4

2 に答える 2

0

これを確認してください:jsfiddle.net/Nz3Fc/1/

理解できたかどうかわかりませんが、基本的には<ul>ヘッダー テキストに背景画像を永続的に表示するようにして<li>います。ヘッダーをクリックすると背景画像が表示され、それに応じて表示されます。

ヘッダー テキストは の一部では<ul>ないため、背景は独立しているため、別の背景に切り替える必要はありません。それが助けになるなら、私に知らせてください。

コードは次のようになります。

HTML:

<p>BUMPER STICKERS</p>
<ul>    
    <li>This is a paragraph.</li>
    <li>This is a paragraph.</li>    
</ul>

<p>BUMPER STICKERS</p>
<ul>
    <li>This is a paragraph.</li>
    <li>This is a paragraph.</li>    
</ul>

CSS:

p {
    background-image: url(http://placehold.it/200x50);
    background-position:13% 50%;
    background-repeat: no-repeat;
}

ul {   
    background-position:13% 102%;
    background-repeat: no-repeat;
}

.LightSelector {
    background-image: url(http://placehold.it/100x400);
    background-position:0% 0%;
    background-repeat: no-repeat;
}

JS:

$(document).ready(function () {

    $("p").click(function () {              
        $("ul li").toggle();        
    });

     $("ul li").click(function(e){
       e.preventDefault();
       $("ul li").addClass("LightSelector").not(this).removeClass("LightSelector");
    });

});
于 2013-03-01T23:45:13.023 に答える