0

我正在使用 jQuery 将类添加到最接近的 href 类中。

但它不起作用......

问题是，使用这样的代码，它将act类添加到菜单中的所有a元素，而不仅仅是最近的 a元素。

也许我应该使用别的东西？或者我编写代码的方式可能有问题？

<script type="text/javascript">
$(document).ready(function(){ 
$("#nav").hover(function(){ 
    //$('ul li.current').addClass('act');
    $(this).closest("a.mitem").addClass("act");
  }, 
  function () {
     $(".mitem").removeClass('act');
  }
  );    

});
</script>

        <ul id="nav">
            <li><a href="#" class="mitem mhome" title="">home</a></li>
            <li><a href="#" class="mitem mshop" title="">shop</a>
                <ul class="child">
                    <li class="mheader"></li>
                    <li><a href="#">Hard Drives</a></li>
                    <li><a href="#">Monitors</a></li>
                    <li><a href="#">Speakers</a></li>
                    <li><a href="#">Random Equipment</a></li>
                </ul>            
            </li>
         </ul>
4

3 回答 3

1

您将悬停事件附加到整个 ul 元素 #nav，因此最近的锚点将始终是第一个，即使您使用实际的 jQuery 方法进行遍历，例如find()或children()

假设您希望在父元素悬停时添加锚标记类，您可以这样做：

$('#nav>li').on('hover', function() {
    $('.mitem').removeClass('act');
    $(this).find('a.mitem').addClass('act');
});
于 2013-08-20T23:49:43.407 回答
0

其他人发布了答案，然后出于某种原因将其删除，但这是唯一为我工作的答案，所以这里是：

$("#nav li").has("ul").hover(function(){
    $(this).addClass("current").children("ul").fadeIn();
    $(this).children("a.mitem:first").addClass("act");

}, function() {
    $(this).removeClass("current").children("ul").hide();
    $(this).children("a.mitem:first").removeClass("act");

});
于 2013-08-21T04:57:32.303 回答
0

尝试选择this与您的选择器匹配的第一个后代：

$(this).find('a.mitem').first()

演示

于 2013-08-20T23:48:19.007 回答