Question

我有一个推荐书滑块，我想添加一个按钮＆＃34;显示更多＆＃34;如果div中的文本高于200px，如果不是则隐藏它。

这是我的尝试，类dsb是css中的显示块

＆＃13;

$(function() {
  var curHeight = $('.about-bottom-text').height();
  if (curHeight > 250) $(this).parent().find('.readmore').removeClass('dsb');
  else $(this).parent().find('.readmore').addClass('dsb');
});

function changeheight() {
  var readmore = $('.readmore');
  if (readmore.text() == 'Read more') {
    readmore.text("Read less");
  } else {
    readmore.text("Read more");
  }
  $('.height').toggleClass("heightAuto");
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text">
  <p>some text>
</div>
<div class="link">
  <a class="readmore" href="javascript:changeheight()">Read more</a>
</div>

＆＃13;

Answer 1

我建议您切换按钮

我还删除了内联onclick

$(function() {
  $(".readmore").on("click", function(e) {
    e.preventDefault();
    var show = $(this).text()=="Read more";
    var $prevDiv = $(this).parent().prev();
    $prevDiv.css({ "overflow":show?"initial":"hidden" }); // or toggleClass
    $(this).text(show?"Read less":"Read more");
    if ($(this).prev().is("br") ) { // the next can likely be handled by your CSS
       $(this).prev().remove();
    }
    else {
      $(this).before('<br style="clear: both;" />');
    }  
  });
  $('.text').each(function() {
    var tall = $(this).height() > 200;
    $(this).css({ "height":"200px","overflow":"hidden" });
    $(this).next().find('.readmore').toggle(tall);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text">
  <p>some text</p>
</div>
<div class="link">
  <a class="readmore" href="#">Read more</a>
</div>
<div class="text">
  <p>some text<br>some text<br>some text<br>some text<br>some text<br>some text<br>some text<br>some text<br>some text<br>some text<br>some text<br>some text<br>
</div>
<div class="link">
  <a class="readmore" href="#">Read more</a>
</div>

Answer 2

jQuery(document).ready(function ($) {
   
    var divs=$('.text>div').hide(); 

    var h2s=$('.text>h2').click(function () {
        h2s.not(this).removeClass('active')
        $(this).toggleClass('active')
        divs.not($(this).next()).slideUp()
        $(this).next().slideToggle()
        return false; 

    });


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div class="text">
    <h2 class="acc_trigger"><a href="#">Read more</a></h2>
    <div class="link">
    <div class="readmore"> Nice content!</div>
</div>

这是一个简单的例子。

按钮上的扩展高度单击滑块

2 个答案: