$(document).ready(function () {
$("#toggle").click(function () {
if ($(this).data('name') == 'show') {
$("#sidebar").animate({
width: '10%'
}).hide()
$("#map").animate({
width: '89%'
});
$(this).data('name', 'hide')
} else {
$("#sidebar").animate({
width: '29%'
}).show()
$("#map").animate({
width: '70%'
});
$(this).data('name', 'show')
}
});
});
html, body {
width:100%;
height: 100%;
}
#header {
width: 100%;
height: 20%;
float: left;
border: 1px solid;
}
#map {
width: 80%;
height: 80%;
float: left;
border: 1px solid;
}
#sidebar {
width: 19%;
height: 80%;
float: left;
border: 1px solid;
}
#toggle {
width: 10%;
height: 40%;
margin-right: 6.5%;
margin-top: 3.5%;
float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">HEADER
<input type="button" data-name="show" value="Toggle" id="toggle">
</div>
<div id="map">MAP</div>
<div id="sidebar">SIDEBAR</div>
我是一个初学者angularjs
,jquery
和css
。我要创建三个div并排切换的div。请帮助我如何在angularjs中做到这一点。
在正常模式下示例:-
会是这样。
如果我扩展center div,则需要像以下示例:-
如果我扩展上一个div,则需要像以下示例:-
谢谢..
尝试这个。所有div都可以按任何顺序扩展。要切换回正常位置,请再次点击展开的div。
压缩和扩展状态下的宽度以百分比表示,您可以根据需要在CSS中进行更改。我还添加了transition
用于平稳运行的属性。
这是一支笔。
$("a.expansion-btn").click(function (){
classes = this.className;
var divNumber = classes.slice(-1);
var toGetId = "#div-"+divNumber;
if ($(toGetId).hasClass("expanded-div")){
$(".normal-div").removeClass("compressed-div expanded-div");
}
else{
$(".normal-div").removeClass("compressed-div expanded-div").addClass("compressed-div");;
$(toGetId).removeClass("compressed-div").addClass("expanded-div");
}
});
*{
box-sizing:border-box;
}
.container{
margin:0;
padding:0;
width:100%;
height:400px;
}
.normal-div{
width:33.33%;
height:100%;
position:relative;
border:2px solid black;
float:left;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.expanded-div{
width:80%;
}
.compressed-div{
width:10%;
}
#div-1{
background-color:green;
}
#div-2{
background-color:red;
}
#div-3{
background-color:blue;
}
a.expansion-btn{
position:absolute;
top:10px;
right:10px;
font-weight:bold;
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="normal-div" id="div-1">
<a class="expansion-btn exp-1">click</a>
</div>
<div class="normal-div" id="div-2">
<a class="expansion-btn exp-2">click</a>
</div>
<div class="normal-div" id="div-3">
<a class="expansion-btn exp-3">click</a>
</div>
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句