jquery - 使用 jQuery 仅显示当前项目 div

Question

我的 jQuery：

$(document).ready(function() {
    $('li').hover(function () {
        $(this).children('div:first-child').show();
    }, function () {
            $( this ).find('div').hide();
    });
});

我的 HTML：

<ul>
    <li>Item 1</li>
    <li>Item 2 <div class="action hide">New | Delete</div>
        <ul>
            <li>Item 2.1</li>
            <li>Item 2.1 <div class="action hide">New | Delete</div></li>
        </ul>
    </li>   

</ul>

当我在第 2.1 节中移动鼠标时，它也显示了<div class="action hide"> New | Delete </ div>第 2 项，我不想显示，我该怎么办？

谢谢！

Answer 1

根据您的整体情况，这样的事情相当有效：

var $last_action;
$('li').hover(function() {
    $last_action = $('div.action:visible').length ? 
                   $('div.action:visible') : 
                   $last_action;
    $last_action && $last_action.hide();
    $(this).children('div:first-child').show();
}, function() {
    $last_action && $last_action.show();
    $(this).find('div').hide();
});​

看演示