2

矢印をクリックすると展開する独自のドロップダウン ナビゲーションを作成しようとしています (今のところ、スパン内の > のみ)

私のスクリプトは一連の を循環し、それらの中<li>に子があるかどうかをチェック<ul>します。a が検出された場合、ユーザーが何かをクリックしてメニューを展開できるように、親<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
4

1 に答える 1

2

: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");
});
于 2012-12-17T04:56:19.697 に答える