Jquery：添加切换操作以下拉菜单

Question

我正在尝试创建自己的下拉导航，在点击箭头时会展开（现在只是一个＆gt;在一个范围内）

我的脚本循环浏览一系列<li>并检查其中是否有子<ul>。如果检测到<ul>，则会将<span class='submenuarrow'> ></span>附加到父<li>，以便用户点击某些内容展开菜单。在切换之前一直工作正常 - 子菜单跨度出现但单击时不执行任何操作。

这是因为我使用find找到附加的元素吗？我做错了什么？

我的完整脚本是：

$("#menu ul li").each(function() { 

var sub = $(this).find("ul");

//IF UL IS DETECTED
if (sub.size() > 0) {

//APPENDS ARROW TO LI
$(this).append("<span class='submenuarrow'> ></span>");

//ADDS TOGGLE
$(this).find("span").click(function() {
   $(this).find("ul").toggle("slow");
});//END TOGGLE    

}//END IF

});//END EACH

Answer 1

使用:has()选择器很简单！

jsBin demo

$('#menu li:has(ul)').each(function() {   
    $(this).append( "<span class='submenuarrow'> &gt; </span>" );  
});

$('#menu').on('click','.submenuarrow',function() {
    $(this).prev("ul").slideToggle("slow");
});

也适用于：

$('.submenuarrow').on('click',function() {
    $(this).prev("ul").slideToggle("slow");
});