Question

我希望在每组元素的第一个元素中添加一个类。但我的JS只适用于第一套。

尝试在文档加载时将一个类添加到集合的第一个元素，并在悬停时删除该类。

HTML

<div id="mega-menu-container">
   <div id="mega-menu">
      <div class="menu-title active"><h4>.....</h4></div>
      <div class="menu-title"><h4>.....</h4></div>
      <div class="menu-title"><h4>.....</h4></div>
      <div class="menu-title"><h4>.....</h4></div>
      <div class="menu-title"><h4>.....</h4></div>
   </div>
   <div id="mega-menu">
      <div class="menu-title"><h4>.....</h4></div>
      <div class="menu-title"><h4>.....</h4></div>
      <div class="menu-title"><h4>.....</h4></div>
      <div class="menu-title"><h4>.....</h4></div>
      <div class="menu-title"><h4>.....</h4></div>
   </div>
</div>

JS

(function($) {
$(document).ready(function() {
$('#mega-menu-container .menu-title').eq(0).addClass('active');

$('#mega-menu-container .menu-title h4').hover(function(){
    $('#mega-menu-container .menu-title').toggleClass('active').siblings().removeClass('active')
});
$("#mega-menu-container .menu-title h4").mouseleave(function(){
    $('#mega-menu-container .menu-title').eq(0).addClass('active');
});
});
})(jQuery);

问题

问题是 - 班级＆＃34; 活跃＆＃34;在第一组中的第一个div menu-title上添加，但在第二个集合中没有，正如您在HTML中看到的那样。

Answer 1

您需要使用 :first-child 选择器来选择所有父元素的第一个子元素。：

$('#mega-menu-container .menu-title:first-child').addClass('active');

您还需要修复悬停事件，以仅定位最接近的相关元素，而不是全部。您可以使用当前元素上下文this以及遍历来定位其他h4元素。

Answer 2

您也可以通过CSS执行此操作而无需任何jquery。让我们说你的活跃css正在改变颜色为绿色或任何东西。意思是整套是红色的。然后你可以做here

我在这里使用#mega-menu > :first-child

如何使用jQuery将类添加到每个集合中的第一个子元素

2 个答案: