使用jQuery仅显示当前项div

时间:2012-06-19 20:25:34

标签: jquery

我的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,我不想显示,我该怎么做?

谢谢!

1 个答案:

答案 0 :(得分:2)

这样的事情运作得相当好,取决于你的整体情况:

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

See demo