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 也被“悬停”在悬停的子元素上，但我不显示那些“li_options”。

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

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

但是这样一来， parent 就不会被排除在外......我不知道如何指出他们，因为可能有无穷无尽的关卡。你知道如何让它发挥作用吗？

Answer 1

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

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

或者这样 => http://jsfiddle.net/N6xqm/ (较小的方式)

额外您还可以通过 TreeView 菜单的名称查看一些插件。 - 如果需要或者您正在寻找这样的东西:http://jquery.bassistance.de/treeview/demo/

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

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

希望它能满足您的需求:)

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

(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>​