我在尝试为网站运行的功能时遇到问题。我想要做的是移动然后在单击按钮时展开一个 div。单击后，按钮中的文本变为“关闭”。单击关闭按钮时，div 将返回其原始位置。
对于我的生活，我无法弄清楚如何让它发挥作用。
这是我目前的情况
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
var text = 1;
$('button').click(function(){
if(text == 1){
$("div.div1").toggleClass("animateSlide");
$('button').html('Go Back');
text = 0;
} else{
$("div.div1").toggleClass("animateSlide");
$('button').html('Start Animation');
text = 1;
}
});
</script>
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="col-xs-12 v-center">
<div class="content text-center">
<div class="col-xs-4 animated slideInRight ">
<div class="div1"><button>Start Animation</button></div>
</div>
<div class="col-xs-2 animated slideInRight"> <a href="#"> hello</a>
</div>
<div class="col-xs-2 animated slideInRight"><p>hello</p>
</div>
</div>
</div>
<style>
.div1{
transition: all .5s;
background:#98bf21;
height:100px;
width:100px;
position:absolute;
}
.animateSlide{
width: 150px;
height: 150px;
opacity: .5;
margin-left:100px;
}</style>
</body>
</html>
最佳答案
创建一个单独的类并使用.toggleClass()
var text = 1;
$('button').click(function(){
if(text == 1){
$('div').toggleClass('animated');
$('button').html('Go Back');
text = 0;
} else{
$('div').toggleClass('animated');
$('button').html('Start Animation');
text = 1;
}
});div{
transition: all .5s;
background:#98bf21;
height:100px;
width:100px;
position:absolute;
}
.animated{
width: 150px;
height: 150px;
opacity: .5;
margin-left:100px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><button>Start Animation</button></div>关于javascript - 使用js/jquery扩展和缩回div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31595127/