Javascript 如何在单击'&引用；“更多”；按钮_Javascript_Jquery_Css

Javascript 如何在单击'&引用；“更多”；按钮

javascript jquery css

Javascript 如何在单击'&引用；“更多”；按钮,javascript,jquery,css,Javascript,Jquery,Css,有一个元素列表，我需要在单击“更多”按钮时展开每个元素，在单击“更少”按钮时折叠每个元素。但当我点击更多按钮时，所有div将同时打开，我也无法关闭它们。单击“减少”按钮。代码如下： <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <style> .hidi{ height

有一个元素列表，我需要在单击“更多”按钮时展开每个元素，在单击“更少”按钮时折叠每个元素。但当我点击更多按钮时，所有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>


hidi先生{
高度：20px；
溢出：隐藏；
边框：1px纯红；
}
1.
2.
3.
... 更多+
1.
2.
3.
... 更多+
$（“.more”）。单击（函数（）{
变量el=$（'.hidi'），
curHeight=标高高度（），
autoHeight=el.css（'height'，'auto'）.height（）；
标高高度（curHeight）.animate（{height:autoHeight}，1000），
$（this.text（“…less-”）；
});

将

var el=$（'.hidi'）

更改为

var el=$（this.prev（）

时，它会起作用。在新代码中，“更多按钮”指的是他自己的.hidi div

工作示例：

您可以使用和使用&来设置动画

CSS

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

$(".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');
  }
})

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

$(".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');
  }
})

试试这个：

HTML:

工作示例：

使用

css

和

jquery

$（“yourclass”）.css（{“height”：“auto”}）

它可以很好地工作，但它可以在所有div中工作，我希望在每次clicked@inazkhahesh mikonam；）