代码之家 › 专栏 › 技术社区 › Albert qerimi

只对单击按钮的div设置动画

jquery javascript

Albert qerimi · 技术社区 · 6 年前

$(document).ready(function() {
var text = $('.description'),
     btn = $('.btn-overflow'),
       h = text[0].scrollHeight; 

if(h > 120) {
	btn.addClass('less');
	btn.css('display', 'block');
}

	$(".emp-bio .btn-overflow").click(function(e) {

  e.stopPropagation();
	e.preventDefault();
  if ($(this).hasClass('less')) {
      $(this).removeClass('less');
      $(this).addClass('more');
      $(this).text('Show less');

      text.animate({'height': h});
  } else {
      $(this).addClass('less');
      $(this).removeClass('more');
      $(this).text('Show more');
      text.animate({'height': '120px'});
  }  
});


});

.description {
  width: 250px;
  height: 120px;
  display: block;
  overflow: hidden;
  word-break: break-word;
  word-wrap: break-word;
}

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<div class="emp-bio">
<div class="description">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<a class="btn-overflow" href="#">Show more</a>
</div>
<div class="emp-bio">
<div class="text-overflow">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<a class="btn-overflow" href="#">Show more</a>
</div>
<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

1 回复 | 直到 6 年前

hifebriansyah 6 年前

祝您有个美好的一天,,

$(document).ready(function() {
var text = $('.description'),
     btn = $('.btn-overflow'),
       h = text[0].scrollHeight; 

if(h > 120) {
	btn.addClass('less');
	btn.css('display', 'block');
}

	$(".emp-bio .btn-overflow").click(function(e) {

  e.stopPropagation();
	e.preventDefault();
  if ($(this).hasClass('less')) {
      $(this).removeClass('less');
      $(this).addClass('more');
      $(this).text('Show less');

      //use siblings to access .description in same level.
      $(this).siblings( ".description" ).animate({'height': h});
  } else {
      $(this).addClass('less');
      $(this).removeClass('more');
      $(this).text('Show more');

      //use siblings to access .description in same level.
      $(this).siblings( ".description" ).animate({'height': '120px'});
  }  
});


});

.description {
  width: 250px;
  height: 120px;
  display: block;
  overflow: hidden;
  word-break: break-word;
  word-wrap: break-word;
}

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<div class="emp-bio">
<div class="description">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<a class="btn-overflow" href="#">Show more</a>
</div>
<div class="emp-bio">
<div class="description">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<a class="btn-overflow" href="#">Show more</a>
</div>
<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>