Question

基本上，我只想为有孩子的顶级菜单项添加一个下拉箭头。我已尝试使用不同的jQuery方法在线进行各种教程，但似乎没有一个对我有用（或者我在尝试时选择了错误的类）。

我一直围绕着这个大脑。目前在实际网站上，每个菜单项都有一个下拉箭头。

有没有人对我的具体例子有任何想法？我不知道我在用jQuery做什么，所以当我设置它时，我可能只是放入了错误的class / div。

我的CSS：

nav > ul {
    text-align: right;
}
nav > ul > li {
    font-family: 'Open Sans Condensed', sans-serif;
    display: inline-block; 
    font-weight: bold;
    font-size: 14pt;
    background: url('/wp-content/uploads/menu-arrow.png') no-repeat center bottom;
    height: 60px;
}
nav > ul > li a {
    text-decoration: none;
    color: #414141;
    display: block;
    padding: 0 10px 0 10px;
    text-align: center;
    text-transform: uppercase;
    height: 70px;
    font-size: 14px;
}
nav > ul > li a:hover {
    color: #3ca648;
}
nav > ul > li > .sub-menu {
    display: none;
    position: absolute;
    z-index: 1000;
    background-color: #3ca648;
    padding-top: 10px;
}
nav > ul > li .sub-menu a {
    color: #FFF;
    font-size: 14px;
    text-transform: initial;
}
nav > ul > li .sub-menu a:hover {
    color: #414141;
}
nav li:hover .sub-menu {
    display: block;
}
nav > ul > li > .sub-menu {
    text-align: center;
}

Answer 1

您需要检查每个父LI是否有嵌套列表。您可以使用每个函数执行此操作，然后将类添加到父LI。我在这里更新你的小提琴。

http://jsfiddle.net/XUQ3d/1/

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

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

Answer 2

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

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

CSS：

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

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

在此CSS下拉菜单中添加图像箭头？

2 个答案: