我有一个具有展开折叠功能的三个div。如果我展开一个div,我需要设置一些图像到其他div。如果我回到正常模式,我需要原始内容是什么DIV中存在如何在崩溃时为div设置图片,然后如果我点击展开需要展示内容?
$("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");
$(".normal-div").removeClass("expanded-div");
}
else{
$(".normal-div").removeClass("compressed-div");
$(".normal-div").removeClass("expanded-div");
$(".normal-div").addClass("compressed-div");
$(toGetId).removeClass("compressed-div");
$(toGetId).addClass("expanded-div");
}
});
*{
box-sizing:border-box;
}
.contenth1{
height:20%;
}
.contenth2{
height:70%;
}
.container{
margin:0;
padding:0;
width:100%;
height:400px;
}
.normal-div{
width:33.33%;
height:100%;
position:relative;
border:2px solid black;
float:left;
}
.expanded-div{
width:80%;
}
.compressed-div{
width:10%;
}
#div-1{
}
#div-2{
}
#div-3{
}
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">
<div class="contenth1">
<a class="expansion-btn exp-1">click</a>
</div >
<div class="contenth2">one</div>
</div>
<div class="normal-div" id="div-2">
<div class="contenth1">
<a class="expansion-btn exp-2">click</a>
</div>
<div class="contenth2">two</div>
</div>
<div class="normal-div" id="div-3">
<div class="contenth1">
<a class="expansion-btn exp-3">click</a>
</div>
<div class="contenth2">three</div>
</div>
</div>
例1: - 虽然展开DIV另外两个DIV我需要隐藏的内容和表现出一定的glyphicons这样的形象
一些事情
图像不开放 – ab29007
我不知道如何设置图像,而扩大div –
我的意思是您所包含的图像无法打开。编辑问题 – ab29007