0

在嵌套的 ul li 中，我需要在 li 悬停时显示编辑和更新链接。我有为我做这件事的 jquery 代码。当我从上到下遍历时，Jquery 工作正常，但是当我从下到上遍历时，它不能按预期工作并显示父 li 的隐藏 div。

我只想显示悬停 li 的跨度。这是必需的。

<ul id="tree">
<li><span>Mobile </span>&nbsp; <span class="links" style="display: none;">Hey Hi, YOu
    caught me!!!</span>
    <ul class="subItem">
        <li><span>GSM Mobiles </span>&nbsp; <span class="links" style="display: none;">Hey Hi,
            YOu caught me!!!</span> </li>
        <li><span>Smart Mobiles </span>&nbsp; <span class="links" style="display: none;">Hey
            Hi, YOu caught me!!!</span>
            <ul class="subItem">
                <li><span>Android Mobiles </span>&nbsp; <span class="links" style="display: none;">Hey
                    Hi, YOu caught me!!!</span> </li>
                <li><span>Sabian Mobiles </span>&nbsp; <span class="links" style="display: none;">Hey
                    Hi, YOu caught me!!!</span> </li>
            </ul>
        </li>
        <li><span>Dual SIM Mobiles </span>&nbsp; <span class="links" style="display: none;">
            Hey Hi, YOu caught me!!!</span> </li>
    </ul>
</li>
<li><span>Watches </span>&nbsp; <span class="links" style="display: none;">Hey Hi, YOu
    caught me!!!</span>
    <ul class="subItem">
        <li><span>Chronograph Watches </span>&nbsp; <span class="links" style="display: none;">
            Hey Hi, YOu caught me!!!</span> </li>
        <li><span>Water Resistance </span>&nbsp; <span class="links" style="display: none;">
            Hey Hi, YOu caught me!!!</span> </li>
    </ul>
</li>
</ul>

我的 jQuery 代码在这里：

$('ul li').hover(function () {
            $("ul>li>span.links").hide();
            $(this).find("span.links").first().show();
        }, function () {

            $("ul>li>span.links").hide();
            $(this).find("span.links").first().hide();

        });

这是 jsFiddle 链接

4

1 回答 1

1

打印出 $(this) 我注意到，您正在选择内部和外部列表，请在选择器中更具体： 

$('#tree ul li').hover(function () {
   $("ul>li>span.links").hide();  

    $(this).find("span.links").first().show();
}, function () {
    $("ul>li>span.links").hide();
    $(this).find("span.links").first().hide();
});
于 2012-08-03T06:57:08.653 回答