jQuery從兩個不同的按鈕之間切換類

Question

我遇到了一個按鈕，試圖將我的頭弄亂了。

基本上我有兩個按鈕。 按鈕＃1位於側欄上，並具有以下樣式的兩種狀態

.Bt, .BtT {
height: 129px;
cursor: pointer;
background: url('../images/sideBtns.png') no-repeat;  
}

.BtT{
background-position: 0 -129px;
}

然后在我的HTML <div id="closeRefs" class="Bt"> （這是側面的那個）中，第二個是

<a class="openRef" ...> ... </a>

然后我的javaScript如下

    $("#closeRefs").click(function () {//SIDE BUTTON
        $(".Bt").toggleClass('BtT');
    });

    $(".openRef").click(function () {//REFERENCES OPEN
        $(".Bt").removeClass('Bt').addClass('BtT');
    });

其工作方式如下：側面按鈕在background-position之間切換，參考按鈕也可以打開被單擊的側面按鈕（如果側面按鈕未打開）。 當我單擊參考按鈕時，問題仍然存在，它打開了側面按鈕，然后當我單擊側面按鈕時，它本身並未關閉。

Answer 1

這可能是因為您在單擊openRef時刪除了Bt類。 因此，當您單擊closeRefs ，沒有Bt類的元素

var $bt = $(".Bt");
$("#closeRefs").click(function () {//SIDE BUTTON
    $bt.toggleClass('BtT');
});

$(".openRef").click(function () {//REFERENCES OPEN
    $bt.removeClass('Bt').addClass('BtT');
});

Answer 2

如果我正確理解了您，這就是您要嘗試做的： http : //jsfiddle.net/KQ7EQ/

阿倫（Arun）所說的是正確的，您要刪除Bt使目標div不再有任何可回溯的內容。 另外，您沒有設置“重置位置”。

例如：刪除BlT ，不會告訴背景返回其初始位置。

如果添加：

.Bt{
    background-position: 0 0;
}

這將告訴背景圖像重置其位置。

另外，如果您希望在BlT處於活動狀態時Bl消失，反之亦然，則應該使用：

$bt.toggleClass('Bt').toggleClass('BlT');

由於Bt從一開始就存在，因此在添加BlT時它將被刪除，而在再次調用它時將被刪除。