JqueryのToggle/add/removeクラスが期待通りに動作しない

Question

私のコードでは2つのボックスがあります。ボックスをクリックすると幅が増え、別のボックスをクリックすると幅が増えて削除されます前のボックスから余分な幅。私はこれをうまくやったことがありますが、余分な幅のボックスをもう一度クリックすると余分な幅が取り除かれません。

$('.dos').click(function() { 
 
    $(this).toggleClass('clicked'); 
 
}); 
 

 
$('.dos').click(function() { 
 
    $('.dos').removeClass('clicked'); 
 
    $(this).addClass('clicked'); 
 
});

#box { 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 1px solid #ccc; 
 
    transition: width 1s; 
 
} 
 

 
#box.clicked { 
 
    width: 200px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="box" class="dos"></div> 
 
<div id="box" class="dos"></div>

だけトグルクラスもaddClassとremoveClass

（Demo on jsfiddle.net）で動作するはずたい

Answer 1

更新fiddleをチェックして、

$(this).toggleClass('clicked').siblings().removeClass('clicked'); 

を試してみてください

デモ

$('.dos').click(function() { 
 
    $(this).toggleClass('clicked').siblings().removeClass('clicked');  
 
});

#box { 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 1px solid #ccc; 
 
    transition: width 1s; 
 
} 
 

 
#box.clicked { 
 
    width: 200px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="box" class="dos"></div> 
 
<div id="box" class="dos"></div>

Answer 2

あなたはクラスを追加/削除してプレイする必要はありません。ここでは、このを使用してのjQueryコードnew fiddle
編集ですが、私はちょうどブール変数を追加しました：

var toggle = false; 
$('.dos').click(function() { 
toggle = !toggle; 
if (toggle) { 
    $(this).toggleClass('clicked'); 
} 

}); 
$('.dos').click(function() { 
toggle = !toggle; 
if (toggle) { 
    $('.dos').removeClass('clicked'); 
    $(this).addClass('clicked'); 
    } 
}); 

Answer 3

あなたはそれをあなたが達成したい場合は、」、同様にクリックされたボタンからクラスを削除します1を無視する必要があるでしょソリューション

$('.dos').click(function() { 
    $('.dos').not(this).removeClass('clicked'); 
    $(this).toggleClass('clicked'); 
}); 

Answer 4

クラスを除去しながらクリックし以下の通りです：

あなたは既に切り替えのdivを切り替えるしようとしていました。プラスいつも

$('.dos').click(function() { 

    var out = this; 
    $(".dos").each(function(index ,element) { 
    console.log(element); 
    if($(element).attr("id") != $(out).attr("id")){ 

     $(this).removeClass('clicked'); 
    } 


    }); 

    $(this).toggleClass('clicked'); 

});