0

この単純なhtmlリストを考えてみましょう:

<ul>
    <li><a href="http://google.com/">Test</a></li>
    <li><a href="http://google.com/">Test2</a>
        <ul>
            <li><a href="http://google.com">Test2 - 1</a></li>
            <li><a href="#3">Test2 - 2</a></li>
        </ul>
    </li>
</ul>

折りたたみ可能にするこの3つのjQuery行：

$('ul > li').on('click', function(e) {
    e.preventDefault();
    $(this).find('ul').slideToggle(); 
});

ここでの問題は、リンクがより深くクリックされた場合、リンクulをたどりたいということです。jQuery では次のようになります。

if(this.nodeName != 'A') {
    e.preventDefault();
}

現時点でnodeNameはLI、最後にクリックされた子要素ではありません。

質問:より深い要素用の 2 番目のイベント ハンドラーを使用せずにこれを行うことは可能ですか? (つまり$('ul > li ul li a').click():)

私は成功せずに他の多くの（など）をe.stopPropagation試しcss selectorsました。ul > *ul li

4

3 に答える 3

1

これを試して：

$('li > ul').prev().on('click', function(e) {
    e.preventDefault();
    $(this).next().slideToggle();
});

そして、ここにjsfiddle へのリンクがあります。ここでは、li > ulセレクターがul各子を見つけてから、前の兄弟 (つまりタグ) を選択します。このようにして、タグのデフォルトの動作(つまり、リンクをたどる) を防止し、次の (つまり ) を slideToggle できます。li.prev()aaul

于 2013-04-23T15:05:25.063 に答える
0

いくつかの調査の後、私はこの答えにたどり着きました：

$('ul > li').on('click', function(e) {
     e.stopPropagation();

    if(!$(this).find('ul').length == 0) {
         e.preventDefault();
         $(this).find('ul').slideToggle();     
    } 
});

ulしたがって、クリックされた要素に要素が見つからない場合、リンクをたどります。より良い解決策がある場合は、共有してください:)。

ここで JSFiddle。

このソリューションは、指定された では機能しませulんID:

$('ul#test > li').on('click', function(e) {
     e.stopPropagation();

    if(!$(this).find('ul').length == 0) {
         e.preventDefault();
         $(this).find('ul').slideToggle();     
    } 
});

ここで更新されたフィドルを参照してください。誰かが理由を説明できますか?

わかりました のおかげSimonで、リスナーで修正しましliたul#test：

$('ul#test').on('click', 'li', function(e) {
     e.stopPropagation();

    if(!$(this).find('ul').length == 0) {
         e.preventDefault();
         $(this).find('ul').slideToggle();     
    } 
});

素晴らしい ！

于 2013-04-23T14:32:49.073 に答える