jquery - 在显示和隐藏 div 标签内容的函数上切换样式(类)

Question

我看到很多关于使用 JQuery 显示/隐藏内容的资源，但我不知道如何也可以在此函数上切换样式。我可以切换显示的文本，但我使用按钮作为 anchor 标记中的背景图像。

这是我需要做的。该按钮默认显示更多，但单击该按钮时内容可见；我想切换类/样式，以便按钮指示显示更少。

最后，如何将它添加到页面中的多个区域，是否需要为每个区域创建单独的功能？

这是 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();
});