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

Question

我正在编写自己的jQuery导航子菜单脚本.将鼠标悬停在水平nav带有ul标记的链接上时,ul会显示该标记.我有一些代码,nav如果它有一个子菜单,它会在水平链接中添加一个箭头.我的问题是它还将箭头添加到子菜单中的链接.这在功能上并不是什么大不了的事,但看起来确实很糟糕.

奇怪的是,如果我使用$(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');
                });
            });
        });
    });
});

Answer 1

a你必须通过 .each 从循环中取出第一个标签

$(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');
                });
            });
        });
    });
});

演示版