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

nearest（）查找html树，你想使用find（）来查看悬停的元素behing，但你也想使用hover（）的第二个回调来再次隐藏它

编辑似乎你从代码中删除了nearest（）

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

仅显示属于许多元素使用的类的一个元素

2 个答案: