jquery - 仅显示一个元素，该元素属于一个被许多元素使用的类

Question

无法仅显示最接近用户悬停的类别的子菜单。当用户将鼠标悬停在任何类别上时，所有子菜单都会出现。

jQuery

<script type="text/javascript">
    $(document).ready(function(){
        $(".category").hover(function(){
            $(".submenu").show();
        });
    });

</script>

HTML

<div id="sidebar">
    <ul style="list-style-type:none;">
        <li><a class="category" href="#">Cars </a>
            <ul class="submenu" style="position:absolute; display:none;">
                <li><a href="#">Ford</a></li>
                <li><a href="#">Chevy</a></li>
                <li><a href="#">VW</a></li>  
            </ul>      
        </li>   
        <li><a class="category" href="#">Food </a>
            <ul class="submenu" style="position:absolute; display:none;">      
                <li>Fruits</li>      
                <li>Burgers</li>         
                <li>Veggies</li>     
            </ul> 
        </li>
    </ul> 

</div>

Answer 1

$(".submenu").show();将找到与选择器匹配的所有元素。您需要找到与 CLICKED 项相关的元素，该元素将是$(this).

尝试：

 $(".category").hover(function(){
      $(this).next('ul').show();
 });

或者

 $(".category").hover(function(){
      $(this).next('.submenu').show();
 });

Answer 2

close() 查找 html 树，您想使用 find() 查看悬停的元素内部，但您还想使用 hover() 的第二个回调再次隐藏它

编辑似乎您从代码中删除了最接近（）

$(".category").hover(function(){
        $(this).find(".submenu").show();
    },function(){
        $(this).find(".submenu").hide();
    } );