0

クリックイベントに問題があります。イベント（クリック）で別の要素をクリックすると、他の場所のクリックのようにカウントされません。アクティブな要素が 1 つ必要か、または何も必要ありません。

デモ: http://jsfiddle.net/WP4RH/

コード：

   $('span').click(function(){
     var $this = $(this);
     if($this.hasClass('active')){
        $this.removeClass('active')}
     else $this.addClass('active');

     $('div').click(function(){                        
        if (!$this.has(this).length) {                                 
             $this.removeClass('active');                            
        }          
     });
     return false;
   });
4

4 に答える 4

2

spanこれをイベント ハンドラーの先頭に追加します。

$('.active').removeClass('active');

デモ

これは、同じスパンでの複数回のクリックを保持することを前提としていますactive。それを望まない場合は、私に知らせてください。コードを変更できます。</p>

于 2012-11-08T21:50:06.090 に答える
1

手始めに、div ハンドラを外側に移動してから、removeClassdiv 要素に基づいて移動する必要があります。

$('span').click(function(e) {
    e.stopPropagation();

    $(this).parent().find('span').removeClass('active');   
    $(this).toggleClass('active');
});

$('div').click(function() {
    $(this).find('span').removeClass('active');
});

デモ: http://jsfiddle.net/WP4RH/1/

于 2012-11-08T21:52:02.170 に答える
0

クリックハンドラー内でクリックハンドラーをバインドしないでください。代わりに、ターゲットがクリックハンドラー内のdivまたはspanであるかどうかを確認してください。activeまた、にクラスを追加するときはthis、兄弟スパンでクラスを削除するだけです。

$('span').on('click', function(){
    $(this).toggleClass('active').siblings('span').removeClass('active');
});

$('div').on('click', function(e){                        
    if (e.target == this) $('span').removeClass('active');                            
});

フィドル </p>

于 2012-11-08T21:53:33.793 に答える
0

spanそれ自体がクリックされたときにトグルオフ機能を保持したい場合は、次を使用できます。また、スパンがクリックされるたびにイベント ハンドラーをバインドしていることにも注意してください。

http://jsfiddle.net/WP4RH/7/

$("span").click(function() {
    $(this).siblings("span").removeClass("active");  // remove from other spans
    $(this).toggleClass("active");  // toggle this span
    return false;
});
​
$("div").click(function() {
    $(this).find("span").removeClass("active");  // remove from all spans
});
于 2012-11-08T21:51:58.787 に答える