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

无法仅显示与用户悬停的类别最接近的子菜单。当用户将鼠标悬停在任何类别上时，都会显示所有子菜单。仅显示属于多个元素使用的类的一个元素

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>

来源

2012-06-05 AnchovyLegend

$(".submenu").show();会发现，选择匹配的所有元素。您需要找到相对于CLICKED项目的元素，该元素将是$(this)。

尝试：

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

或

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

来源

2012-06-05 15:16:09

太棒了！正是我所期待的。谢谢！ – AnchovyLegend

很高兴帮助。请点击大号复选标记来接受此答案。 –

最接近（）查找HTML树，要使用find（）方法看起来behing徘徊里面的元素，但你也想使用悬停（）的第二个回调再次隐藏

编辑看起来你删除最接近（）从你的代码

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

来源

2012-06-05 15:16:51 charlietfl

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

回答

相关问题