0

私はこのマークアップを持っています:

<ul><li id="link-notifications">
  <ul class="list-notifications" style="display:none">
    <li><a href="/link/to">Item 1</a></li>
  </ul>
</li>
</ul>

このJqueryで：

$('#link-notifications').click(function(e){
   e.preventDefault();
   e.stopPropagation();           
   $(this).find('.list-notifications').slideToggle('medium');       
});

しかし、リストが下にスライドしてリンクをクリックすると、リストが上にスライドするだけです。stopPropagation が機能すると聞いたので追加しましたが機能しません。私はそれをslideToggleコールバックに追加しようとしましたが、slideUpアクションを停止するだけです。何か案は？

4

3 に答える 3

2

内部コンテンツをエスケープする ansclickのみにイベントをバインドします。#link-notifications

$('#link-notifications, :not("#link-notifications > *")').click(function(e){
   e.stopPropagation();           
   $(this).find('.list-notifications').slideToggle('medium');       
});

作業サンプル

于 2012-06-26T08:11:31.717 に答える
0

そのイベント内では必要ありませんが e.stopPropagation()、リンクをクリックする必要があります。

追加するだけ

$('.list-notifications').click(function(e){
    e.stopPropagation();
});

http://jsfiddle.net/N6pYU/1/

于 2012-06-26T08:11:01.323 に答える
-2

HTML

<ul>
    <li id="link-notifications">
    <a href="#">link-notifications</a>
        <ul class="list-notifications">
            <li><a href="#">Item 1</a></li>
        </ul>
    </li>
</ul>​

jQuery

$('#link-notifications>a').click(function(event){
   $(this).siblings('ul.list-notifications').slideToggle('medium');      
});​

スライドしたいものの親ではなく、兄弟にイベントを添付しました。これにより、奇妙なイベントがバブリングするのを防ぎます。

フィドル: http://jsfiddle.net/iambriansreed/59e3F/

于 2012-06-26T08:05:17.137 に答える