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

デモを見る