jquery - 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();
    });
});

但是有了这个，父母并没有被排除在外……我不知道如何指出他们，因为可以有无穷无尽的层次。你知道如何让它工作吗？

Answer 1

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

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

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

另外，您还可以通过树视图菜单的名称查看一些插件。- 如果需要或者如果你正在寻找这样的东西：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>​

Answer 2

最短的方法是

$('.sortable li').mouseover(function(e) {
    $( '> div > .li_options', $(this) ).show();
    e.stopPropagation();
}).mouseout(function(e) {
    $( '> div > .li_options', $(this) ).hide();
    e.stopPropagation();
});