jQuery使子div在悬停时可见(仅在有效的li元素上,而不是父元素!)

Question

我已经尝试了所有与此相关的现有帖子,但它们不能正常工作......

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_options".

迄今为止最好的解决方案:

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

但有了这个,父母并没有被排除在外...我不知道如何指出他们,因为可能有无穷无尽的关卡.你知道怎么做这个吗？

Answer 1

工作演示 http://jsfiddle.net/sm8vS/

\n\n

更新版本 http://jsfiddle.net/36cV3/

\n\n

或者像这样=> http://jsfiddle.net/N6xqm/（较小的方式）

\n\n

另外，您还可以通过树视图菜单的名称查看一些插件。- 如果需要或者您正在寻找类似的东西：http://jquery.bassistance.de/treeview/demo/

\n\n

将出现悬停在Start Page=>上的行为Sub Seite，现在将出现悬停在Sub Seite=> => 上Sub Sub Seite。

\n\n

为了更好地解析，我在各自的菜单结构中添加了 -sub-menu和class 。sub-sub-menu其余代码如下。

\n\n

希望它适合您的需求:)

\n\n

另一种小方法 http://jsfiddle.net/N6xqm/ :)

\n\n

(function($) {\n\n    $(\'.li_options\').hide();\n        $(\'a\').mouseover(function() {\n            $(this).next(\'.li_options\').show();\n        }).mouseout(function() {\n            $(\'.li_options\').hide();\n        });\n\n})(jQuery);\xe2\x80\x8b\n

\n\n

示例代码

\n\n

    (function($) {\n\n    $(\'.li_options\').hide();\n    $(\'.sortable li\').mouseover(function() {\n        $(this).find(\'ol\').show();\n        anchor_hover();\n    }).mouseout(function() {\n        anchor_hover();\n        $(this).find(\'ol\').hide();\n    });\n\n    function anchor_hover() {\n        $(\'a\').mouseover(function() {\n            $(this).next(\'.li_options\').show();\n        }).mouseout(function() {\n            $(\'.li_options\').hide();\n        });\n\n    }\n\n\n})(jQuery);\xe2\x80\x8b\n

\n\n

超文本标记语言

\n\n

<ol class="sortable">\n<li>\n    <div>\n        <a href="#">Start Page</a>\n        <div class="li_options">\n            <a href="#"><img src="img/icons/small_add.png" /></a>\n            <a href="#" onClick="[..]"><img src="img/icons/small_remove.png" /></a>\n        </div>\n        <div class="clear"></div>\n    </div>\n    <ol class="sub-menu">\n        <li>\n            <div>\n                <a href="#">Sub Seite</a>\n                <div class="li_options">\n                    <a href="#"><img src="img/icons/small_add.png" /></a>\n                    <a href="#" onClick="[..]"><img src="img/icons/small_remove.png" /></a>\n                </div>\n                <div class="clear"></div>\n            </div>\n            <ol class="sub-sub-menu">\n                <li>\n                    <div>\n                        <a href="#">Sub Sub Seite</a>\n                        <div class="li_options">\n                            <a href="#"><img src="img/icons/small_add.png" /></a>\n                            <a href="#" onClick="[..]"><img src="img/icons/small_remove.png" /></a>\n                        </div>\n                        <div class="clear"></div>\n                    </div>\n                </li>\n            </ol>\n        </li>\n    </ol>\n</li>\n<div class="clear"></div>\xe2\x80\x8b\n

\n