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

使用jQuery仅显示当前项div

1 个答案:

See demo