如何在下拉菜单中添加箭头答案

【问题标题】：how to add an arrow in a drop-down menu如何在下拉菜单中添加箭头
【发布时间】：2010-08-21 19:52:24
【问题描述】：

我有一个简单的 jquery 下拉菜单。但问题是如果列表有子菜单，我怎么能像其他常用菜单一样放置箭头或只是'+'字符。

function Mx_menu(){
    $(".menu ul").css({display: "none"}); // Opera Fix
    $(".menu li").hover(function(){
                $(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400);
            },function(){
                $(this).find('ul:first').css({visibility: "hidden"});
    });

}    

    $(document).ready(function(){                   
        Mx_menu();
    });

这里还有 CSS 文件：

.menu, .menu ul { margin:0; padding:0; list-style-type:none; list-style-position:outside; position:relative; }
.menu a { color:#a6a6a6; display:block; padding:6px 10px; }             
.menu li { float:left; position:relative; width:200px; }
.menu ul { position:absolute; display:none; width:200px; top:0; left:200px; }
.menu li ul a { width:200px; height:auto; float:left; }
.menu ul ul { top:auto; }
.menu li ul ul { left:200px; margin:0; }
.menu li:hover ul ul, .menu li:hover ul ul ul, .menu li:hover ul ul ul ul { display:none; }
.menu li:hover ul, .menu li li:hover ul, .menu li li li:hover ul, .menu li li li li:hover ul { display:block; }

【问题讨论】：

你为什么不使用一个普通的旧 select 节点呢？
我没有得到。实际上，如果该列表有子菜单，我需要在当前列表中添加一个箭头。
@Delan - <select> 没有子菜单（可能很多级别），重新阅读问题:)

标签： javascript jquery css drop-down-menu

【解决方案1】：

最终我找到了一个解决方案，所以它被称为：prev():

$(".menu li ul").prev().css("background", "url(IMG_URL) transparent");

这里是最终的 jquery 代码：

function Mx_menu(){

    $(".menu li ul").prev().css("background", "url('IMG_URL')");

    $(".menu ul").css({display: "none"}); // Opera Fix
    $(".menu li").hover(function(){
                $(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400);

            },function(){
                $(this).find('ul:first').css({visibility: "hidden"});
    });
}   
$(document).ready(function(){                   
    Mx_menu();
});

【讨论】：

【解决方案2】：

您可以使用.before() 在<li> 内的子<ul> 前面添加+（或任何ASCII 字符），如下所示：

$(".menu li ul").before(' +');

You can give it a try here

【讨论】：

谢谢 nick，但对于复杂的解决方案来说，之前是不够的。我找到了上一个（）。检查一下，它可以工作： $(".menu li ul").prev().css("background", "url('IMG URL') transparent");
@beytar - 我很高兴你找到了解决方案，但这不是你问的问题......你问的是如何插入一个字符，而不是添加背景图片......一定要问在以后的问题中，您实际上要做什么:)
我觉得还可以。但是可以说当我发现 prev() 和重新发现 jquery 一样多时，我很高兴。

【解决方案3】：

.menu li:hover ul li { background:transparent url( IMG_PATH ) left center no-repeat; padding-left:12px; }

请注意，IE6 中不支持 li 的伪选择器。

【讨论】：