javascript - Jquery：将切换操作添加到下拉菜单

Question

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

我的脚本循环遍历一系列<li>s 并检查其中是否有孩子<ul>。如果<ul>检测到 a ，则将其附加<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 演示

$('#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");
});