0

順序付けされていないリストのjqueryでmouseenterイベントとmouseleaveイベントを使用して<li>、マウスがそれらの上にあるときに画像を表示しています。そのリストは通常​​、次のようになります。

<ul class="myTree">
    <li class="treeItem" catid="1" catname="Category 1">
        <img src="img/fleche_hori.png" class="expandImage"/>
        Category 1
        <img src="img/cross.png" class="hidden removecategory"/>
        <ul>
            <li class="treeItem" catid="2" catname="Subcategory 1 1">
                <img src="img/spacer.gif" class="expandImage"/>
                Subcategory 1 1
                <img src="img/cross.png" class="hidden removecategory"/>
            </li>
            <li class="treeItem" catid="3" catname="Subcategory 1 2">
                <img src="img/spacer.gif" class="expandImage"/>
                Subcategory 1 2
                <img src="img/cross.png" class="hidden removecategory"/>
            </li>
        </ul>
    </li>
    <li class="treeItem" catid="4" catname="Category 2">
        ...
    </li>
</ul>

注：読みにくい場合があることは承知していますが、できるだけ読みやすくするために最善を尽くしました。

ご覧のとおり、これは展開/折りたたみツリーに使用される単なるツリーであり、各アイテムはクラス「treeItem」でマークされています。このクラスを維持する必要があります。これは、これらすべてのアイテムで共有される共通のクラスであり、マウスがそれらの上にあるときに画像を表示する必要があるため、イベントハンドラーをそれにバインドすることにしました。

mouseenter / mouseleaveで表示/非表示にする必要がある画像は、各アイテムの2番目です（src = "img / cross.png"の画像）。私はこのスクリプトでそれを非常に簡単に行うことができました：

$(document).on("mouseenter", ".treeItem", function (e) {
    //e.stopPropagation();
    $(this).children(".removecategory").show();
});

$(document).on("mouseleave", ".treeItem", function (e) {
    //e.stopPropagation();
    $(this).children(".removecategory").hide();
});

私の問題は、アイテムが展開されたとき（つまり、「カテゴリ1」が展開され、「サブカテゴリ11」と「サブカテゴリ12」が表示されるようになったとき）、マウスでサブカテゴリのいずれかにカーソルを合わせると、これらのサブカテゴリが画像は質問どおりに表示されますが、親カテゴリ（つまり「カテゴリ1」）の画像は、まだホバリングしているため非表示になりません...

e.stopPropagation（）;を使用してみました。しかし、それは何も良くしませんでした。

これを回避して、コンテンツの一部をホバーしているときに要素でマウスリーブをトリガーする方法を知っている人はいますか？

http://api.jquery.com/mouseleave/#example-0、特にコードブロックの下のデモをチェックして、私が何を意味するかを確認できます。通常（デモの右側）、マウスが黄色のコンテナに入ると、青いコンテナのmouseleaveイベントがトリガーされます。

説明するのが難しかったので、私の質問が明確であることを願っています...

編集：

mouseenterイベントハンドラーを次のように変更する方法を見つけました。

$(document).on("mouseenter", ".treeItem", function (e) {
    $('.removecategory').each(function() {
        $(this).hide();
    });
    $(this).children(".removecategory").show();
});

ただし、サブアイテムにカーソルを合わせた後に画像を再度表示するには、親アイテム全体（つまり、「カテゴリ1」アイテム）を残して再入力する必要があるため、これは完全ではありません。

誰かがより良い方法を持っているなら共有してください！

4

1 に答える 1

1

各カテゴリとサブカテゴリにスパンを追加します。

<ul class="myTree">
    <li class="treeItem" catid="1" catname="Category 1">
        <img src="img/fleche_hori.png" class="expandImage"/>
        <span class="Item">Category 1</span>
        <img src="http://www.pokerland-il.com/images/smilies/smile.png" class="hidden removecategory"/>
        <ul>
            <li class="treeItem" catid="2" catname="Subcategory 1 1">
                <img src="" class="expandImage"/>
                <span class="Item">Subcategory 1 1</span>
                <img src="http://www.pokerland-il.com/images/smilies/smile.png" class="hidden removecategory"/>
            </li>
            <li class="treeItem" catid="3" catname="Subcategory 1 2">
                <img src="img/spacer.gif" class="expandImage"/>
                <span class="Item">Subcategory 1 2</span>
                <img src="http://www.pokerland-il.com/images/smilies/smile.png" class="hidden removecategory"/>
            </li>
        </ul>
    </li>
    <li class="treeItem" catid="4" catname="Category 2">
        ...
    </li>
</ul>​

JS を次のように変更します。

$('.Item').mouseover(function(){
    $(this).next(".removecategory").show();
});

$('.Item').mouseout(function(){
    $(this).next(".removecategory").hide();
});​

http://jsfiddle.net/xBwyZ/3/

于 2012-05-22T12:58:53.977 に答える