Question

我有一个div，其类名为“ content”，并且其中包含一些内容。我将其高度设置为80px。高度：80px;溢出：隐藏；

我有一个按钮，其类名为“ button”，我试图切换高度并使高度自动，或者在单击时将其高度更改为80像素，然后再次单击将div恢复为80像素。

我还试图在显示更多/更少显示之间更改按钮的值

谢谢

Answer 1

.height {
    height: 80px;
}

$(".button").click(function(){
    $("div.container").toggleClass("height");
});

Answer 2

这是摆脱许多javascript的解决方案，

$('.button').click(function(){
  $('.content').toggleClass('changeHeight');
  $('.button > *').toggleClass('show hide')
})

.show {display: block;}
.hide {display: none;}
.content {height: 80px; background: red; color: white;}
.content.changeHeight {height: auto;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="content">
  <div>Some contents</div>
</div>
<button class="button">
  <span class="show">Show</span>
  <span class="hide">Hide</span>
</button>

如果要为其设置动画，可以将transition添加到课程content。

还有另一种有用的方法将类切换到包含这两个元素（按钮和div）的父元素。

Answer 3

检查此代码段。希望对您有帮助！

$(".btn").on("click", function(){
	var $btn = $(".btn");
  var $content = $(".content");
  $content.toggleClass("sized");

  if($btn.text() == "Show More"){
  	$btn.text("Show Less")
  } else if($btn.text() == "Show Less"){
  	$btn.text("Show More")
  }
});

body{
  font-family: sans-serif;
}
.content{
  height: 80px;
  background: #f3f3f3;
  padding: 5px 10px;
  box-sizing: border-box;
  border-radius: 3px;
}
.btn{
  margin-top: 10px;
  padding: 10px;
  background: #d63333;
  display: inline-block;
  color: #fff;
  border-radius: 3px;
  cursor: pointer;
}
.sized{
  height: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content sized">Hello World!</div>
<div class="btn">Show More</div>

Answer 4

这可以为您提供帮助

$(document).ready(function (){
    $("#button").on("click", function (){
        if ($(".content").height() == 0) {
           $(".content").animate(
               {height: "80px"});
           }
        else if ($(".content").height() == 80) {
           $(".content").animate({height: "0px"});
           }
        });
    });

用jQuery切换div的高度

4 个答案: