使用 Javascript 的 Div 布局
如果我点击 + 它应该打开并再次点击 - 它应该关闭它工作正常但我需要的是如果有更多的 div 如何在运行时处理它们。
<html>
<head>
<script src="jquery-1.7.1.js"></script>
<script src="script.js"></script>
<style type="text/css">
#widnow{
width:100%;
border:solid 1px;
float:left;
}
#title_bar{
background: #FEFEFE;
height: 25px;
width: 100%;
}
#button{
border:solid 1px;
width: 25px;
height: 23px;
float:right;
cursor:pointer;
}
.box{
height: 50%;
width: 50%;
background: #DFDFDF;
float:left;
}
#title_bar1{
background: #FEFEFE;
height: 25px;
width: 100%;
}
#button1{
border:solid 1px;
width: 25px;
height: 23px;
float:right;
cursor:pointer;
}
.box1{
height: 50%;
width: 50%;
background:#C0C0C0;
float:left;
}
</style>
</head>
<body>
<div id="widnow">
<div class="box" >
<div id="title_bar">
<div id="button">+</div>
</div>
</div>
<div class="box1">
<div id="title_bar1">
<div id="button1">-</div>
</div>
</div>
</div>
</body>
</html>
脚本.js
jQuery().ready(function() {
$("#button").click(function(){
if($(this).html() == "-"){
$(this).html("+");
$( ".box" ).css( "width","50%" );
$( ".box1" ).show();
}
else{
$(this).html("-");
$( ".box" ).css( "width","100%" );
$( ".box1" ).hide();
}
});
});
请提出可以帮助我解决问题的想法。
最佳答案
不要硬编码 div 的选择器。这样您就可以将其扩展到单个 div 之外。
使用这样的东西:
$('button').on('click',function(){
$(this).parent('div').css({'width' : '50%'});
});
关于javascript - 使用 Javascript 的 div 布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11027655/