Jquery 是否将图像箭头添加到此CSS下拉菜单？

基本上，我只想为有子菜单项的顶部菜单项添加一个下拉箭头。我在网上用不同的jQuery方法尝试了各种教程，但没有一个适合我，或者我在尝试时选择了错误的类

我已经为这件事绞尽脑汁好一阵子了。目前在live网站上，我在每个菜单项上都有一个下拉箭头

有人对我的具体例子有什么想法吗？我不知道我在用jQuery做什么，所以我可能只是在设置jQuery时输入了错误的类/div

我的CSS：

---

您需要对每个父LI进行检查，以确定其内部是否有嵌套列表。您可以通过使用each函数，然后向父LI添加一个类来实现这一点。我更新了你的小提琴

---

下面的javascript使用JQuery，将向任何具有子菜单的菜单项添加一个类向下箭头。现在，您可以使用CSS向其添加向下箭头图像

$(document).ready(function(){
    $("#mainNav .sub-menu").each(function() {
        $(this).closest("li.menu-item").addClass("has-submenu");
    });
});

CSS:

---

编辑：更改CSS，将背景图像添加到锚定标记中，而不是li本身。

我还不能回答自己的问题，但我弄明白后觉得自己很笨。Wordpress自动有一个名为menu item has children的类，所以我所要做的就是将nav>ul>li.menu-item-has-children添加到样式表中，并像我以前做的那样设置背景图像。如果类名已经存在，这是有意义的。听起来好像已经有某种脚本正在运行，将它们作为模板的一部分添加到那里。所以，是的，您应该能够从样式表中以类名为目标。您甚至不需要jQuery。

$(function() {
    $('#mainNav > li').each(function(){
        var hasNestedItems = $(this).find('li').length;

        if(hasNestedItems > 0){
            $(this).addClass('arrow');
        }
    });
});

$(document).ready(function(){
    $("#mainNav .sub-menu").each(function() {
        $(this).closest("li.menu-item").addClass("has-submenu");
    });
});

.has-submenu > a {
 background: url("arrow.png") no-repeat 0 center;
}