单击“更多”按钮时如何将div height属性更改为auto

Question

there is a list of elements and i need to expand each element on click the more button and collapse each element when click on the less button. 有一个元素列表，我需要展开每个元素单击更多按钮，并在单击less按钮时折叠每个元素。 but when i click to more button all div will open at the same time also i can't close them . 但当我点击更多按钮时，所有div将同时打开，我也无法关闭它们。 click on the less button. 单击less按钮。 here is the code: 这是代码：

<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>

Answer 1

It works when you change var el = $('.hidi') into var el = $(this).prev() . 将var el = $('.hidi')更改为var el = $(this).prev() 。 With the new code the 'more button' refers to his own .hidi div. 使用新代码，“更多按钮”指的是他自己的.hidi div。

Working example: https://jsfiddle.net/6dL5svL6/ 工作示例： https ： //jsfiddle.net/6dL5svL6/

Answer 2

You can use jQuery UI and use addclass & removeclass to animate it. 您可以使用jQuery UI并使用addclass和removeclass来为其设置动画。

CSS CSS

.open {
  color: green;
  cursor: pointer;
  height: auto;
}

JS 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 的jsfiddle

Answer 3

Try this: 尝试这个：

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: 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 +');
    }
});

Working example: https://jsfiddle.net/hwunuz7b/ 工作示例： https ： //jsfiddle.net/hwunuz7b/

单击“更多”按钮时如何将div height属性更改为auto

问题描述

3 个解决方案

解决方案1
1

解决方案2
1 2016-08-21 07:53:01

解决方案3
1 已采纳 2016-08-21 07:58:24

单击“更多”按钮时如何将div height属性更改为auto

问题描述

3 个解决方案

解决方案1 1

解决方案2 1 2016-08-21 07:53:01

解决方案3 1 已采纳 2016-08-21 07:58:24

解决方案1
1

解决方案2
1 2016-08-21 07:53:01

解决方案3
1 已采纳 2016-08-21 07:58:24