在顯示和隱藏div標籤內容的功能上切換樣式（Class）

Question

我使用JQuery在顯示/隱藏內容上看到很多資源，但我不知道如何將此函數的樣式切換爲好。我可以切換顯示的文本，但是我將一個按鈕用作錨標記中的背景圖像。

這是我需要做的。該按鈕默認爲「顯示更多」，但按鈕單擊時內容可見;我想切換類/樣式，以便按鈕指示Show Less。

最後，如何將此添加到頁面中的多個區域，是否需要爲每個區域創建單獨的功能？

這裏是JQuery的：

<script type="text/javascript"> 
$(document).ready(function() { 
    $('#additionalContentBox').hide(); 
    $('.readmore').toggle(function(){ 
    $('#additionalContentBox').show(); 
    }, 
    function(){ 
    $('#additionalContentBox').hide(); 
    $('.readless').toggle(function(){ 
    }); 
}); 
</script> 

的HTML：

<a href="#/" class="readmore readless">Read Full Article</a> 

<div id="additionalContentBox"> 
<p>pulvinar tellus. Maurtis commodo urna at dui bibendum quis euismod velit egestas. Vestibulum ante ipsum primis in faucibus orci luctus et. ante ipsum primis in faucibus</p> 
</div> 

最後，CSS：

.readmore{ 
    display: block; 
    background-image: url(img/readmore15.png); 
    text-indent: -10000px; 
    background-repeat: no-repeat; 
    background-position: bottom left; 
    display: block; 
    height: 18px; 
    line-height: 18px; 
    width: 100px; 
    margin-left: 4px; 
    margin-top: 4px; 
    margin-bottom: -14px; 
} 


.readless{ 
    background-image: url(img/readmore15.png); 
    background-position: top left; 
} 

Answer 1

你可以嘗試一些簡單的，如：

$('#your-link').click(function(){ 
    $(this).toggleClass('readless'); 
    $('#your-div').toggle(); 
}); 

Answer 2

給你的'a'標籤一個ID並在你的jQuery中選擇它。

爲ID提供按鈕的通用CSS屬性。

此外，還要保留readmore類，並在CSS中給它提供'readmore'的背景屬性。

當它被點擊時，第一次使用jQuery刪除'readmore'類並添加'readless'類。

jQuery("#myID").removeClass("readmore").addClass("readless") 

Answer 3

我會稍微改變您的標記，使「additionalContentBox」一類，而不是一個ID，因爲你可能會擁有不止一個。最好我還會給這個元素一個默認樣式「display：none」，這樣它就不必等待JS隱藏了。阿洛斯，我可能從沒有「不讀」類的元素開始。因此，標記是這樣的：

<a href="#/" class="readmore">Read Full Article</a> 
<div class="additionalContentBox" style="display: none;"> 
<p>pulvinar tellus. Maurtis commodo urna at dui bibendum quis euismod velit egestas. Vestibulum ante ipsum primis in faucibus orci luctus et. ante ipsum primis in faucibus</p> 
</div> 

隨後，我會成立了jQuery這樣的：

$(document).ready(function() { 
    $('.readmore').click(function(){ 
    if ($(this).hasClass('readless')){ 
     $(this).removeClass('readless'); 
    }else{ 
     $(this).addClass('readless'); 
    }; 
    $(this).next('.additionalContentBox').toggle('fast'); 
    }); 
});