如何不添加箭头到jQuery子菜单中的链接？

我在写我自己的jQuery导航子菜单脚本。当您将鼠标悬停在具有ul标记的水平nav的链接上时，它会显示ul。如果它有一个子菜单，我有一些代码会为横向nav中的链接添加箭头。我的问题是，它也会将箭头添加到子菜单中的链接。这在功能上并不是什么大问题，但它看起来很糟糕。如何不添加箭头到jQuery子菜单中的链接？

奇怪的是，如果我使用$(this).find('> a')它拧紧了子菜单的外观。当我将鼠标悬停在顶层链接上时，会出现子菜单，但当鼠标离开链接时会立即消失。所以当鼠标悬停在顶层链接上时，我基本上可以看到整个子菜单。当鼠标离开顶层链接时，子菜单消失，我无法点击子菜单链接。我究竟做错了什么？

这是JSFiddle。将$(this).find('a')更改为$(this).find('> a')，您会看到我的意思。谢谢你的时间！

$(document).ready(function(){ 
    $('nav ul li:has(ul)').each(function(){ 
     var listItem = $(this); 
     $(this).find('> a').each(function(){ 
      var aTag = $(this); 
      aTag.append('<img src="{img_url}/caret.png" width="8" height="8">'); 
      aTag.on('mouseover', function(){ 
       listItem.find('ul').each(function(){ 
        $(this).css('display', 'block'); 
       }); 
      }) 
      .on('mouseout', function(){ 
       listItem.find('ul').each(function(){ 
        $(this).css('display', 'none'); 
       }); 
      }); 
     }); 
    }); 
});

来源

2015-05-09 ShoeLace1291

你必须通过。每个

$(document).ready(function() { 
    $('nav ul li:has(ul)').each(function() { 
     var listItem = $(this); 
      // first a tag as new var 
      var aTagFirst = listItem.children('a'); 
      aTagFirst.append('<img src="{img_url}/caret.png" width="8" height="8">'); 

     $(this).find('a').each(function() { 
      var aTag = $(this); 
      aTag.on('mouseover', function() { 
       listItem.find('ul').each(function() { 
        $(this).css('display', 'block'); 
       }); 
      }) 
       .on('mouseout', function() { 
       listItem.find('ul').each(function() { 
        $(this).css('display', 'none'); 
       }); 
      }); 
     }); 
    }); 
});

DEMO

从环拉出第一 a标签

来源

2015-05-09 05:56:49

我想你可以通过CSS做到这一点，我已删除的事件mouseover，mouseout，并将此风格：

li:hover ul { 
    display: block; 
} 

li:hover a { 
    background: #66cc00; 
} 

li:hover li a { 
    background: #333; 
}

DEMO

来源

2015-05-09 05:49:15 marsh

$(document).ready(function() { 
    $('nav ul li:has(ul)').each(function() { 
     var listItem = $(this); 
     $(this).find('> a,>ul').each(function() { 
      var aTag = $(this); 
      aTag.append('<img src="{img_url}/caret.png" width="8" height="8">'); 
      aTag.on('mouseover', function() { 
       listItem.find('ul').each(function() { 
        $(this).css('display', 'block'); 
       }); 
      }) 
      .on('mouseout', function() { 
       listItem.find('ul').each(function() { 
        $(this).css('display', 'none'); 
       }); 
      }); 
     }); 
    }); 
});

这里只更新：

$(this).find('> a,>ul')

的CSS：

只更新之一：

nav > ul > li > a { 
    display: block; 
    margin: 0px; 
    border-bottom: 0; 
    color: #333; 
    height: 52px; 
    padding: 0px 25px 0px 25px; 
    font-size: 1.25em; 
    line-height:55px; 
}

更新中填充，并添加行高。

演示：http://jsfiddle.net/fsrf5jw3/5/

来源

2015-05-09 05:51:44

您需要悬停回调添加到您的li元素，而不是a元素，所以代码变成：

var listItem = $(this); 
listItem.find('> a').each(function(){ 
    var aTag = $(this); 
    aTag.append('<img src="{img_url}/caret.png" width="8" height="8">'); 
}); 

listItem 
    .on('mouseover', function(){ 
     listItem.find('ul').each(function(){ 
      $(this).css('display', 'block'); 
     }); 
    }) 
    .on('mouseout', function(){ 
     listItem.find('ul').each(function(){ 
      $(this).css('display', 'none'); 
     }); 
    });

此外，作为marsh答案去，它是更适当的性能 - 用CSS来做这些事情，而不是JavaScript。

来源

2015-05-09 05:52:11 Eternal1

如何不添加箭头到jQuery子菜单中的链接？

回答

相关问题