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/

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

或者喜欢这个=＆gt; http://jsfiddle.net/N6xqm/（更小的方式）

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

行为将鼠标悬停在Start Page =＆gt;上将显示Sub Seite，现在将鼠标悬停在Sub Seite =＆gt;上=＆GT; 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();
});

jQuery使子div在悬停时可见（仅在有效的li元素上，而不是父元素！）

2 个答案: