如何在父母的mouseenter上显示元素？

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

但它适用于所有与班级控制的孩子们。你能帮我么？我想

Answer 1

.find() method会找到所有匹配的后代元素。

如果您只想选择直接子女，请改用.children() method：

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

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

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