点击红圈时，我只想要选中的<div>元素向下移动，就像现在一样，全部 <div>元素正在向下移动，因为我没有指出哪个 <div>移动。
我尝试过“child”和“this”，但无法让它正常工作。
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'
});
}
});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;
}<script type="text/javascript" src="//code.jquery.com/jquery-compat-git.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<section id="main">
<div class="container">
<h3 style="margin-bottom: 20px;">Restauranger</h3>
<div class="row">
<div class="col-sm-3">
<div class="company-container">
<img src="img/restaurang.jpg">
<div class="company-logo-container">
<img src="https://ocast.com/upload/l-0wt4X9t7Zu6Lie_100x100.jpg">
</div>
<h2>Krikelin & Co</h2>
<i class="fa fa-circle open" aria-hidden="true"></i><span class="time">11.00 - 14.00</span>
<div class="text-overflow">
<h5 style="padding: 0px 10px;">
<p>Dagens gourmetkorv med goda hemlagade tillbehör & riktig mos</p>
<p>Stekt Bräckkorv från Undersåker med våran egna potatissallad</p>
<p>Lchf-lunch är en stor salladstallrik med grillad gourmetkorv</p>
<p>Cesarsallad med Svensk grillad kyckling, VB-ost romansallad</p>
</h5>
</div>
<img src="img/gradient.png" style="margin-top: -15px;" height="20px;">
<a class="btn-overflow" href="#"><i class="fa fa-angle-down" aria-hidden="true"></i></a>
<div style="border-top: 1px solid #e2e2e2;">
<div class="col-sm-6" style="padding: 15px 0px;">
<span>Hitta hit</span>
</div>
<div class="col-sm-6" style=" padding: 15px 0px;">
<span>Matsedel</span>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="col-sm-3">
<div class="company-container">
<img src="img/restaurang2.png">
<div class="company-logo-container">
<img src="http://www.lunchguide.nu/img/logo/ostersund/restauranghov.png?v=1442815946">
</div>
<h2>Restaurang Hov</h2>
<i class="fa fa-circle closed" aria-hidden="true"></i><span class="time">Stängt</span>
<div class="text-overflow">
<h5 style="padding: 0px 10px;">
<p>Dagens gourmetkorv med goda hemlagade tillbehör & riktig mos</p>
<p>Stekt Bräckkorv från Undersåker med våran egna potatissallad</p>
<p>Lchf-lunch är en stor salladstallrik med grillad gourmetkorv</p>
<p>Cesarsallad med Svensk grillad kyckling, VB-ost romansallad</p>
</h5>
</div>
<img src="img/gradient.png" style="margin-top: -15px;" height="20px;">
<a class="btn-overflow" href="#"><i class="fa fa-angle-down" aria-hidden="true"></i></a>
<div style="border-top: 1px solid #e2e2e2;">
<div class="col-sm-6" style="padding: 15px 0px;">
<span>Karta</span>
</div>
<div class="col-sm-6" style=" padding: 15px 0px;">
<span>Matsedel</span>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="col-sm-3">
<div class="company-container">
<img src="img/restaurang.jpg">
<div class="company-logo-container">
<img src="https://ocast.com/upload/l-0wt4X9t7Zu6Lie_100x100.jpg">
</div>
<h2>Krikelin & Co</h2>
<i class="fa fa-circle closed" aria-hidden="true"></i><span class="time">Stängt</span>
<div class="text-overflow">
<h5 style="padding: 0px 10px;">
<p>Dagens gourmetkorv med goda hemlagade tillbehör & riktig mos</p>
<p>Stekt Bräckkorv från Undersåker med våran egna potatissallad</p>
<p>Lchf-lunch är en stor salladstallrik med grillad gourmetkorv</p>
<p>Cesarsallad med Svensk grillad kyckling, VB-ost romansallad</p>
</h5>
</div>
<img src="img/gradient.png" style="margin-top: -15px;" height="20px;">
<a class="btn-overflow" href="#"><i class="fa fa-angle-down" aria-hidden="true"></i></a>
<div style="border-top: 1px solid #e2e2e2;">
<div class="col-sm-6" style="padding: 15px 0px;">
<span>Karta</span>
</div>
<div class="col-sm-6" style=" padding: 15px 0px;">
<span>Matsedel</span>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="col-sm-3">
<div class="company-container">
<img src="img/restaurang3.jpg">
<div class="company-logo-container">
<img height="85" src="http://previews.123rf.com/images/tribalium123/tribalium1231210/tribalium123121000041/15575599-crossed-fork-and-spoon-food-icon-food-symbol-restaurant-label--Stock-Photo.jpg">
</div>
<h2>Krikelin & Co</h2>
<i class="fa fa-circle open" aria-hidden="true"></i><span class="time">10:00 - 16:00</span>
<div class="text-overflow">
<h5 style="padding: 0px 10px;">
<p>Dagens gourmetkorv med goda hemlagade tillbehör & riktig mos</p>
<p>Stekt Bräckkorv från Undersåker med våran egna potatissallad</p>
<p>Lchf-lunch är en stor salladstallrik med grillad gourmetkorv</p>
<p>Cesarsallad med Svensk grillad kyckling, VB-ost romansallad</p>
</h5>
</div>
<img src="img/gradient.png" style="margin-top: -15px;" height="20px;">
<a class="btn-overflow" href="#"><i class="fa fa-angle-down" aria-hidden="true"></i></a>
<div style="border-top: 1px solid #e2e2e2;">
<div class="col-sm-6" style="padding: 15px 0px;">
<span>Karta</span>
</div>
<div class="col-sm-6" style=" padding: 15px 0px;">
<span>Matsedel</span>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="col-sm-3">
<div class="company-container">
<img src="img/restaurang.jpg">
<div class="company-logo-container">
<img src="http://thumbs.dreamstime.com/x/restaurangsymbol-med-kockhatten-38633339.jpg">
</div>
<h2>Krikelin & Co</h2>
<div class="text-overflow">
<h5 style="padding: 0px 10px;">
<p>Dagens gourmetkorv med goda hemlagade tillbehör & riktig mos</p>
<p>Stekt Bräckkorv från Undersåker med våran egna potatissallad</p>
<p>Lchf-lunch är en stor salladstallrik med grillad gourmetkorv</p>
<p>Cesarsallad med Svensk grillad kyckling, VB-ost romansallad</p>
</h5>
</div>
<img src="img/gradient.png" style="margin-top: -15px;" height="20px;">
<a class="btn-overflow" href="#"><i class="fa fa-angle-down" aria-hidden="true"></i></a>
<div style="border-top: 1px solid #e2e2e2;">
<div class="col-sm-6" style="padding: 15px 0px;">
<span>Karta</span>
</div>
<div class="col-sm-6" style=" padding: 15px 0px;">
<span>Matsedel</span>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="col-sm-3">
<div class="company-container">
<img src="img/restaurang.jpg">
<div class="company-logo-container">
<img src="https://ocast.com/upload/l-0wt4X9t7Zu6Lie_100x100.jpg">
</div>
<h2>Krikelin & Co</h2>
<div class="text-overflow">
<h5 style="padding: 0px 10px;">
<p>Dagens gourmetkorv med goda hemlagade tillbehör & riktig mos</p>
<p>Stekt Bräckkorv från Undersåker med våran egna potatissallad</p>
<p>Lchf-lunch är en stor salladstallrik med grillad gourmetkorv</p>
<p>Cesarsallad med Svensk grillad kyckling, VB-ost romansallad</p>
</h5>
</div>
<img src="img/gradient.png" style="margin-top: -15px;" height="20px;">
<a class="btn-overflow" href="#"><i class="fa fa-angle-down" aria-hidden="true"></i></a>
<div style="border-top: 1px solid #e2e2e2;">
<div class="col-sm-6" style="padding: 15px 0px;">
<span>Karta</span>
</div>
<div class="col-sm-6" style=" padding: 15px 0px;">
<span>Matsedel</span>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="col-sm-3">
<div class="company-container">
<img src="img/restaurang.jpg">
<div class="company-logo-container">
<img src="https://ocast.com/upload/l-0wt4X9t7Zu6Lie_100x100.jpg">
</div>
<h2>Krikelin & Co</h2>
<div class="text-overflow">
<h5 style="padding: 0px 10px;">
<p>Dagens gourmetkorv med goda hemlagade tillbehör & riktig mos</p>
<p>Stekt Bräckkorv från Undersåker med våran egna potatissallad</p>
<p>Lchf-lunch är en stor salladstallrik med grillad gourmetkorv</p>
<p>Cesarsallad med Svensk grillad kyckling, VB-ost romansallad</p>
</h5>
</div>
<img src="img/gradient.png" style="margin-top: -15px;" height="20px;">
<a class="btn-overflow" href="#"><i class="fa fa-angle-down" aria-hidden="true"></i></a>
<div style="border-top: 1px solid #e2e2e2;">
<div class="col-sm-6" style="padding: 15px 0px;">
<span>Karta</span>
</div>
<div class="col-sm-6" style=" padding: 15px 0px;">
<span>Matsedel</span>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="col-sm-3">
<div class="company-container">
<img src="img/restaurang.jpg">
<div class="company-logo-container">
<img src="https://ocast.com/upload/l-0wt4X9t7Zu6Lie_100x100.jpg">
</div>
<h2>Krikelin & Co</h2>
<div class="text-overflow">
<h5 style="padding: 0px 10px;">
<p>Dagens gourmetkorv med goda hemlagade tillbehör & riktig mos</p>
<p>Stekt Bräckkorv från Undersåker med våran egna potatissallad</p>
<p>Lchf-lunch är en stor salladstallrik med grillad gourmetkorv</p>
<p>Cesarsallad med Svensk grillad kyckling, VB-ost romansallad</p>
</h5>
</div>
<img src="img/gradient.png" style="margin-top: -15px;" height="20px;">
<a class="btn-overflow" href="#"><i class="fa fa-angle-down" aria-hidden="true"></i></a>
<div style="border-top: 1px solid #e2e2e2;">
<div class="col-sm-6" style="padding: 15px 0px;">
<span>Karta</span>
</div>
<div class="col-sm-6" style=" padding: 15px 0px;">
<span>Matsedel</span>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</section>最佳答案
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'});
}
});
关于javascript - 我无法在 jQuery 中使用 ".child"或 ".next"选择正确的 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40664049/