我无法使用＆＃34; .child＆＃34;选择正确的div。或＆＃34; .next＆＃34;在jQuery中

Question

点击红色圆圈时，我只希望选定的<div>元素向下移动，因为现在所有<div>元素都向下移动，因为我没有指出{移动{1}}

我已经尝试过＆＃34;孩子＆＃34;和＆＃34;这个＆＃34;但是我无法让它正常工作。

＆＃13;

＆＃13;

<div>

＆＃13;

	var text = $('.text-overflow'),
	  btn = $('.btn-overflow'),
	  h = text[0].scrollHeight;

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

	btn.click(function(e) {
	  e.stopPropagation();

	  if (btn.hasClass('less')) {
	    btn.removeClass('less');
	    btn.addClass('more');
	    btn.html('<i class="fa fa-angle-up" aria-hidden="true"></i>');

	    text.animate({
	      'height': h
	    });
	  } else {
	    btn.addClass('less');
	    btn.removeClass('more');
	    btn.html('<i class="fa fa-angle-down" aria-hidden="true"></i>');
	    text.animate({
	      'height': '73px'
	    });
	  }
	});

＆＃13;

body {
  line-height: 1.4;
  font: 13px;
  font-family: 'Open Sans', sans-serif;
  background: #f7f7fa;
  color: #353535;
  margin-bottom: 383px;
  -webkit-font-smoothing: antialiased;
}
section#head-nav {
  background: #202b35;
}
section#second-nav {
  margin-bottom: 40px;
  border-bottom: 1px solid #d3d3d3;
  background: #f1f1f4;
}
.company-container {
  background: #FFF;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .15);
  border-radius: 4px;
  transition: box-shadow .2s ease;
  text-align: center;
  margin-bottom: 25px;
}
.company-container IMG {
  width: 100%;
  padding: 5px;
  border-radius: 9px;
}
.company-container span {
  font-size: 0.9em;
  font-weight: 100;
  font-family: arial;
  text-transform: uppercase;
  color: #959595;
}
.company-logo-container {
  text-align: center;
  margin-top: -50px;
}
.company-logo-container IMG {
  width: 100%;
  border-radius: 10px;
  width: 80px;
  background: #FFF;
  border-bottom: 1px solid #CCC;
}
.company-container h2 {
  font-size: 20px;
  padding-bottom: 0px;
}
.company-container h5 {
  font-size: 1em;
  color: #a1a1a1;
  font-weight: 100;
  font-family: arial;
  line-height: 1.3em;
}
.glyphicon {
  font-family: 'Glyphicons Halflings' !important;
  // more css comes along here

}
.text-overflow {
  height: 73px;
  display: block;
  overflow: hidden;
  word-break: break-word;
  word-wrap: break-word;
  margin-top: 7px;
}
a.btn-overflow {
  display: none;
  text-decoration: none;
  font-size: 1.8em;
  padding: 10px 15px;
  margin-top: 5px;
  border-radius: 50px;
  color: #949494;
  border: 1px solid #cecece;
  display: inline-block !important;
  margin-bottom: 03px;
  background-color: #ec2127;
  z-index: 999999 !important;
}
.company-container span.time {
  padding: 6px 9px;
  font-size: 0.9em;
}
.open {
  color: #a1c988 !important;
}
.closed {
  color: #d89191 !important;
}

＆＃13;

＆＃13;

＆＃13;

jsFiddle

Answer 1

JsFiddle

var text = $('.text-overflow'),
btn = $('.btn-overflow'),
h = text[0].scrollHeight; 

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

btn.click(function(e) 
{
  e.stopPropagation();

  if ($(this).hasClass('less')) {
      $(this).removeClass('less');
      $(this).addClass('more');
      $(this).html('<i class="fa fa-angle-up" aria-hidden="true"></i>');

      $(this).parent().find(".text-overflow").animate({'height': h});
  } else {
      $(this).addClass('less');
      $(this).removeClass('more');
      $(this).html('<i class="fa fa-angle-down" aria-hidden="true"></i>');
      $(this).parent().find(".text-overflow").animate({'height': '73px'});
  }
});