如何并排展开和折叠三个div？

129

苏雷什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] 删除。

编辑于 2020-10-29

我来说两句

0 条评论

登录后参与评论

TOP 榜单

文章

如何并排展开和折叠三个div？

如何并排展开和折叠三个div？

我来说两句

相关文章

TOP 榜单

Java-具有语法的抽象语法树

在父容器调整大小时重新绘制Google地图

如何确保Ruby中的字符串长度

编年史地图：带有Gradle和AspectJ的ClassNotFoundException

EF 6.1中的LINQ查询自定义对象最佳实践

Android的onActivityResult的requestCode

Kubernetes - 从私有 docker 注册表中提取错误

一对多关系MySQL-仅获得一个多记录

如果应用程序从任务管理器中终止，NSUrlSession是否继续文件传输？

用PHPMailer格式化电子邮件正文的问题

尝试创建python程序，但使用def进行了简化

为什么此python生成器函数只能正确运行一次？

在Spring Boot的REST API中使用Jersey而不是Spring MVC的优势是什么？

将公式设置为范围（例如A1）与A1内容的像元

在Android Studio中添加外部Jar库时出错

Docker私有注册表| TLS证书发行

C ++中的记忆函子包装器

React Router Link重新加载页面：与外部事件冲突

名称空间中不存在属性“ Class”

java等于。调试时方法错误

Django模型：动态更改db_table

热门标签

归档