0

我看到很多关于使用 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;
}
4

3 回答 3

1

您可以尝试一些简单的方法，例如：

$('#your-link').click(function(){
    $(this).toggleClass('readless');
    $('#your-div').toggle();
});
于 2012-07-31T14:49:07.287 回答
0

给你的'a'标签一个ID并在你的jQuery中使用它来选择它。

为 ID 提供按钮的通用 CSS 属性。

还要在其上保留“readmore”类，并在 CSS 中为其提供“readmore”的背景属性。

第一次单击时，使用 jQuery 删除“readmore”类并添加“readless”类。

jQuery("#myID").removeClass("readmore").addClass("readless")
于 2012-07-31T14:49:27.787 回答
0

我会稍微更改您的标记以使“additionalContentBox”成为一个类而不是一个ID，因为您可能会有多个。最好我也会给那个元素一个默认样式“显示：无”，这样它就不必等待 JS 隐藏。Alos，我可能会从还没有“无读”类的元素开始。所以标记看起来像这样：

 <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');
  });
});
于 2012-07-31T14:57:02.353 回答