5

これに関連する既存の投稿をすべて試しましたが、希望どおりに機能しません...

HTML：

<ol class="sortable">
<li>
    <div>
        <a href="#">Start Page</a>
        <div class="li_options">
            <a href="#"><img src="img/icons/small_add.png" /></a>
            <a href="#" onClick="[..]"><img src="img/icons/small_remove.png" /></a>
        </div>
        <div class="clear"></div>
    </div>
    <ol>
        <li>
            <div>
                <a href="#">Sub Seite</a>
                <div class="li_options">
                    <a href="#"><img src="img/icons/small_add.png" /></a>
                    <a href="#" onClick="[..]"><img src="img/icons/small_remove.png" /></a>
                </div>
                <div class="clear"></div>
            </div>
            <ol>
                <li>
                    <div>
                        <a href="#">Sub Sub Seite</a>
                        <div class="li_options">
                            <a href="#"><img src="img/icons/small_add.png" /></a>
                            <a href="#" onClick="[..]"><img src="img/icons/small_remove.png" /></a>
                        </div>
                        <div class="clear"></div>
                    </div>
                </li>
            </ol>
        </li>
    </ol>
</li>
<div class="clear"></div>

これは次のようになります。

  • スタートページ
    • サブページ
      • サブページ

すべてのli要素に設定されているdiv.li_optionsを、ホバリング要素にのみ表示したいと思います。親のliも子要素をホバリングするときに「ホバー」されていることは知っていますが、これらの「li_options」は表示されません。

これまでの最良の解決策：

$(document).ready(function() {      
    $('.sortable li').mouseover(function() {
        $(this).children().children('.li_options').show();
    }).mouseout(function() {
        $(this).children().children('.li_options').hide();
    });
});

しかし、これで、両親は除外されていません...無限のレベルがある可能性があるので、私は彼らを指す方法がわかりません。これを機能させる方法を知っていますか？

4

2 に答える 2

4

作業デモ http://jsfiddle.net/sm8vS/

更新されたバージョン http://jsfiddle.net/36cV3/

またはこのように=> http://jsfiddle.net/N6xqm/（より小さな方法）

Extraまた、ツリービューメニューの名前でいくつかのプラグインを見ることができます。-必要な場合、または次のようなものを探している場合：http: //jquery.bassistance.de/treeview/demo/

動作ホバーオーバーStart Page=>Sub Seiteが表示され、ホバーオーバーSub Seite=>=>Sub Sub Seiteが表示されます。

より良い構文解析のために、それぞれのメニュー構造に-sub-menuとクラスを追加しました。sub-sub-menu残りのコードは次のとおりです。

それがあなたのニーズに合うことを願っています:)

http://jsfiddle.net/N6xqm/を実行するもう1つの非常に小さな方法 :)

(function($) {

    $('.li_options').hide();
        $('a').mouseover(function() {
            $(this).next('.li_options').show();
        }).mouseout(function() {
            $('.li_options').hide();
        });

})(jQuery);​

サンプルコード

    (function($) {

    $('.li_options').hide();
    $('.sortable li').mouseover(function() {
        $(this).find('ol').show();
        anchor_hover();
    }).mouseout(function() {
        anchor_hover();
        $(this).find('ol').hide();
    });

    function anchor_hover() {
        $('a').mouseover(function() {
            $(this).next('.li_options').show();
        }).mouseout(function() {
            $('.li_options').hide();
        });

    }


})(jQuery);​

HTML 

<ol class="sortable">
<li>
    <div>
        <a href="#">Start Page</a>
        <div class="li_options">
            <a href="#"><img src="img/icons/small_add.png" /></a>
            <a href="#" onClick="[..]"><img src="img/icons/small_remove.png" /></a>
        </div>
        <div class="clear"></div>
    </div>
    <ol class="sub-menu">
        <li>
            <div>
                <a href="#">Sub Seite</a>
                <div class="li_options">
                    <a href="#"><img src="img/icons/small_add.png" /></a>
                    <a href="#" onClick="[..]"><img src="img/icons/small_remove.png" /></a>
                </div>
                <div class="clear"></div>
            </div>
            <ol class="sub-sub-menu">
                <li>
                    <div>
                        <a href="#">Sub Sub Seite</a>
                        <div class="li_options">
                            <a href="#"><img src="img/icons/small_add.png" /></a>
                            <a href="#" onClick="[..]"><img src="img/icons/small_remove.png" /></a>
                        </div>
                        <div class="clear"></div>
                    </div>
                </li>
            </ol>
        </li>
    </ol>
</li>
<div class="clear"></div>​
于 2012-10-28T10:29:53.403 に答える
0

最短の方法は

$('.sortable li').mouseover(function(e) {
    $( '> div > .li_options', $(this) ).show();
    e.stopPropagation();
}).mouseout(function(e) {
    $( '> div > .li_options', $(this) ).hide();
    e.stopPropagation();
});
于 2012-10-28T11:35:58.347 に答える