0

我有一个嵌套项目列表，每个项目都有自己的编辑链接。

<ul>
<li>Coffee</li>
<li>
    Fruits <a href="#" class="editLink">Edit</a>
    <ul>
        <li>Banana <a href="#" class="editLink">Edit</a></li>
        <li>Orange <a href="#" class="editLink">Edit</a></li>
        <li>
            Apple <a href="#" class="editLink">Edit</a>
            <ul>
                <li>Fuji <a href="#" class="editLink">Edit</a></li>
                <li>Red Delicious <a href="#" class="editLink">Edit</a></li>
                <li>Golden <a href="#" class="editLink">Edit</a></li>
            </ul>
        </li>
    </ul>
</li>
<li>
    Drinks <a href="#" class="editLink">Edit</a>
    <ul>
        <li>Coke <a href="#" class="editLink">Edit</a></li>
        <li>Pepsi <a href="#" class="editLink">Edit</a></li>
    </ul>
</li>
<li>Something <a href="#" class="editLink">Edit</a></li>
</ul>

我只希望在将鼠标悬停在列表元素上时显示编辑链接。目前，当我将鼠标悬停在子元素上时，父元素也会受到影响。

$('li').hover(
    function(){
        $(this).find('.editLink').show();
    },
    function(){
        $(this).find('.editLink').hide();   
    }
);

我有以下 CSS 使编辑链接最初隐藏

.editLink{
    display:none;
}

如何使只有悬停的元素显示编辑链接而不显示其他元素？似乎隐藏部分很好，但显示部分会影响所有嵌套的父母。以下是实际示例：http: //jsfiddle.net/D7yWm/

4

5 回答 5

4

试试这个。它使用直接子选择器（http://jsfiddle.net/D7yWm/4/）：

$(document).ready(function(){
    $('li').hover(
        function(ev){
            var li = $(this);
            li.parents('li').find('>.editLink').hide();
            if ( ! li.find('li > .editLink:visible').length ) {
                li.find('>.editLink').show();
            }
        },
        function(){
            var li = $(this);
            li.find('>.editLink').hide();
            li.parents('li:first').find('>.editLink').show();
        }
    );
});

如果您希望它仅本地化为文本，您将不得不将文本包装在 a<span>或其他东西中并改用它。

ul {
    list-style-position: inside;
}

如果这对您不起作用，您可能需要考虑另一种添加项目符号的方法。或者以此为起点来解决剩下的问题……

于 2013-07-31T21:55:05.270 回答
2

您需要停止在处理程序中传播事件

$(document).ready(function(){
  $('li').hover(
      function(e){
         e.stopPropagation();
           $(this).find('.editLink').show();
      },
      function(){
           $(this).find('.editLink').hide();   
      }
   );
});
于 2013-07-31T21:38:40.253 回答
2

如果你希望父母.editlink在你从他们转移到他们的孩子之后隐藏，那么你可以使用这个：

$('li').hover(
    function(e){
        e.stopPropagation();
        $(this).parents('li').trigger('mouseleave');
        $(this).children('.editLink').show();
    },
    function(e){
        e.stopPropagation();
        $(this).parents('li').trigger('mouseleave');
        $(this).children('.editLink').hide();
    }
);

演示

于 2013-07-31T21:50:25.083 回答
1

这与您的问题不完全相同，但它可能对其他人有所帮助。这个想法是在不影响下面父母的情况下突出显示顶部悬停的孩子：http: //jsfiddle.net/skibulk/mcq6Lvw3/6/

$("div").hover(
    function (e) {
        e.stopPropagation();
        $(this).addClass('active').parents().removeClass('active');
    },
    function (e) {
        $(this).removeClass('active').parent().addClass('active');
    }
);
于 2015-09-10T02:32:33.373 回答
0

由于<li>'s 嵌套在彼此内部，因此当您将鼠标悬停在孩子上时，父母仍然处于“悬停”状态。为了防止显示所有父链接，您可以遍历所有父<li>链接并隐藏父链接。此外，用于.children()仅选择直接子代，而不是嵌套子代。

$(document).ready(function(){
    $('li').hover(
        function(){
            $(this).parents('li').each(function(){$(this).children('.editLink').hide();});
            $(this).children('.editLink').show();
        },
        function(){
            $(this).find('.editLink').hide();   
        }
    );
});

这是一个工作jsfiddle。

于 2013-07-31T21:43:25.697 回答