如何在 parent 上鼠标输入时显示元素？

Question

我有清单：

<ul class="items">
    <li class="item">
         <div>Test</div>
         <div class="control" hidden="true">Visible</div>
         <ul class="items">
             <li class="item">
                 <div>Test1</div>
                 <div class="control" hidden="true">Visible</div>
             </li>
             <li class="item">
                 <div>Test2</div>
                 <div class="control" hidden="true">Visible</div>
             </li>
             <li class="item">
                 <div>Test3</div>
                 <div class="control" hidden="true">Visible</div>
             </li>
         </ul>
    </li>
    <li class="item">
         <div>Test4</div>
         <div class="control" hidden="true">Visible</div>
    </li>
</ul>

我正在尝试

'mouseenter li.item': function (event) {
    $(event.currentTarget).find('div.control').show();
}

但它适用于所有 children div 和 class 'control'。你能帮我么？我觉得

Answer 1

.find() method 将找到 all 个匹配的后代元素。

如果您只想 select 直接 children，请改用 .children() method：

$(event.currentTarget).children('div.control').show();

或者，您也可以使用 direct child selector, >:

$(event.currentTarget).find('> div.control').show();