如何并排展开和折叠三个div？
苏雷什B
$(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，则需要像以下示例：-
谢谢..
ab29007
尝试这个。所有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] 删除。
编辑于
相关文章
TOP 榜单
- 1
任何人都可以帮助我如何编写这行代码。我想在 jsx 中使用 map
- 2
任何人都可以告诉我如何提高我的网站加载速度？
- 3
无法解析“ $ {workspaceFolder}”。请打开一个文件夹。在Visual Studio Code上
- 4
在电报机器人中发送照片的问题
- 5
服务工作者可以获取和缓存跨域资产吗？
- 6
nslookup为什么返回“ DNS请求超时”
- 7
如何在C ++中初始化char * const argv []
- 8
关闭 HP Elitebook 840 上的“麦克风静音”按钮灯
- 9
将所有 fastq 文件压缩为 fastq.gz
- 10
如何在ASP .NetCore MVC Web应用程序中设置视频背景
- 11
如何从joomla 3中的一篇文章中取消发布社交媒体图标？
- 12
如何使用Intellij IDEA推断和完成变量类型
- 13
如何将视频文件从S3存储桶传递到opencv VideoCapture？
- 14
引导修复失败（UEFI和预装的Windows 8）
- 15
测试的JUnit 4下运行，但不JUnit的5 - 编译干净，但0测试执行
- 16
如何修复在Linux内核SPI驱动程序中始终无法通过验证的SPI驱动程序
- 17
尝试启动网络时出错
- 18
如何在Golang中将svg创建和导出到png / jpeg
- 19
Java：强制子类重写超类的方法
- 20
如何在 css 中的导航栏上应用模糊效果
- 21
AFNetworking说“无法解析响应”
我来说两句