有一个元素列表，我需要在单击更多按钮时展开每个元素，并在单击较少按钮时折叠每个元素。但是当我点击更多按钮时，所有 div 将同时打开，我也无法关闭它们。单击更少按钮。 这是代码:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.hidi{
height:20px;
overflow:hidden;
border:1px solid red;
}
</style>
</head>
<body>
<div class="hidi">
<div class="uner-sch">
1
</div>
<div class="uner-sch">
2
</div>
<div class="uner-sch">
3
</div>
</div>
<div class="more"> ... More +</div>
<div class="hidi">
<div class="uner-sch">
1
</div>
<div class="uner-sch">
2
</div>
<div class="uner-sch">
3
</div>
</div>
<div class="more"> ... More +</div>
<script>
$(".more").click(function(){
var el = $('.hidi'),
curHeight = el.height(),
autoHeight = el.css('height', 'auto').height();
el.height(curHeight).animate({height: autoHeight}, 1000),
$(this).text('... less -');
});
</script>
</body>
</html>
最佳答案
试试这个:
HTML:
<div class="container">
<div class="hidi">
<div class="uner-sch">
1
</div>
<div class="uner-sch">
2
</div>
<div class="uner-sch">
3
</div>
</div>
<div class="more"> ... More +</div>
</div>
<div class="container">
<div class="hidi">
<div class="uner-sch">
1
</div>
<div class="uner-sch">
2
</div>
<div class="uner-sch">
3
</div>
</div>
<div class="more"> ... More +</div>
</div>
jQuery:
var curHeight = $('.hidi').height();
$(".more").click(function(){
var container = $(this).parent('.container');
var el = container.find('.hidi');
var autoHeight = el.css('height', 'auto').height();
if(el.hasClass('open')){
el.removeClass('open');
el.height(autoHeight).animate({height: curHeight}, 1000), $(this).text('... less -');
}
else{
el.addClass('open');
el.height(curHeight).animate({height: autoHeight}, 1000), $(this).text('... more +');
}
});
关于javascript - 当我单击“'"更多”按钮时如何将 div 高度属性更改为自动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39061627/