当我单击“更多”按钮时如何将 div 高度属性更改为自动
Posted
技术标签:
【中文标题】当我单击“更多”按钮时如何将 div 高度属性更改为自动【英文标题】：how to change the div height property to auto when I click on '"more" button 【发布时间】：2016-12-27 22:45:06 【问题描述】：有一个元素列表，我需要在单击更多按钮时展开每个元素，并在单击更少按钮时折叠每个元素。但是当我点击更多按钮时，所有 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>
【问题讨论】：
使用css 和jquery ----> $("yourclass").css("height":"auto")
它工作正常，但它适用于所有 div 我想在我单击时为每个 div 执行此代码
【参考方案1】：
试试这个：
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 +');
);
工作示例：https://jsfiddle.net/hwunuz7b/
【讨论】：
@inaz khahesh mikonam ;)【参考方案2】：当您将 var el = $('.hidi') 更改为 var el = $(this).prev() 时，它会起作用。使用新代码，“更多按钮”指的是他自己的 .hidi div。
工作示例：https://jsfiddle.net/6dL5svL6/
【讨论】：
【参考方案3】：您可以使用jQuery UI 并使用addclass 和removeclass 对其进行动画处理。
CSS
.open
color: green;
cursor: pointer;
height: auto;
JS
$(".more").click(function()
// check if it is open
if ($(this).hasClass('toClose'))
// if open , then remove class open and add back hidi
$(this).prev('.open').removeClass('open').addClass('hidi', 1000);
// update text
$(this).removeClass('toClose').text('... More +')
else // if it is in closed state
$(this).addClass('toClose').text('... less -');
$(this).prev('.hidi').addClass('open', 1000).removeClass('hidi');
)
JSFIDDLE
【讨论】：
以上是关于当我单击“更多”按钮时如何将 div 高度属性更改为自动的主要内容，如果未能解决你的问题，请参考以下文章