toggleClass無法在滑塊上工作

我正嘗試使用.toggleClass更改鏈接上的類，以便在切換打開/關閉時將背景圖像從加號切換到減號。它似乎引用了正確的代碼片段，因爲我可以在Firebug中看到它試圖更改類，但實際上並沒有發生變化。這裏是我的代碼：toggleClass無法在滑塊上工作

<div class="slide-click-container"> 
<a href="#" class="slide-click-link"> 
    Click here to expand/contract 

    <span class="control-arrow"><!-- PLUS/MINUS SIGN BACKGROUND IMAGE HERE --></span> 
</a> 

<div class="slider hide"> <!-- HIDE CLASS SETS DIV TO DISPLAY:NONE --> 
    Content here 
</div> 
</div> 

<script type="text/javascript"> 

$(".slide-click-container").click(function(ev){ 
ev.preventDefault(); 
$(this).find(".slider").slideToggle('slow'); 
$(this).find(".control-arrow").toggleClass('open'); 
}); 

</script>

任何幫助，你可以提供將不勝感激！

謝謝！

傑米

來源

2013-03-04 Jamie H

你確定你的元素.control-arrow有寬度嗎？像使用類似於css的：'.control-arrow {width：14px;顯示：內聯塊; }'我用這個CSS測試了你的代碼，然後它似乎工作。 http://jsfiddle.net/nX7J5/ – 2013-03-04 12:33:31

你並不需要使用find這一點。

$(".slide-click-container").click(function(ev){ 
    ev.preventDefault(); 
    $(".slider").slideToggle('slow'); 
    $(".control-arrow").toggleClass('open'); 
});

編輯：使用next和closest代替

$(".slide-click-container").click(function(ev){ 
    ev.preventDefault(); 
    $(this).parent().next().slideToggle('slow'); 
    $(this).closest(".control-arrow").toggleClass('open'); 
});

來源

2013-03-04 12:17:06 Asdine

謝謝你的回覆，阿斯丁。我發現它現在可以與find一起使用，但不幸的是，我在頁面上有幾個這樣的滑塊，所以我使用.find只針對正在切換的特定滑塊。有沒有辦法使用.find使用toggleClass？ – 2013-03-04 12:28:52

使用查找應該工作正常在這種情況下給出的要求 – 2013-03-04 12:36:05

謝謝馬克。但似乎並沒有這樣做，至少與我上面闡述的不同。 – 2013-03-04 12:38:21

給你的類中的一些佈局和一些內容：

.control-arrow { 
    width:14px; 
    display:inline-block; 
}

和一個固定的空間：

<span class="control-arrow">&nbsp;<!-- PLUS/MINUS SIGN BACKGROUND IMAGE HERE --></span>

來源

2013-03-04 12:37:59

toggleClass無法在滑塊上工作

回答

相關問題