javascript - 如何不向 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

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

$(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