我的问题对于很多人来说相当简单。 我想扩大div(onClick),以适应外部股利,它应该完全覆盖所有其他三个股利(不是全屏)点击展开div
我想使用下面的代码,但页面的整个结构当我尝试这样做时会感到不安。
<head runat="server">
<title>Untitled Page</title>
<link href="css/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.8.1.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js" type="text/javascript"></script>
<style type="text/css">
.toggler
{
max-width: 500px;
max-height: 270px;
position: relative;
}
.newClass
{
height: 500px;
width: 290px;
display: inline-block;
z-index: 10000px;
float: left;
}
.divClass
{
float: left;
vertical-align: middle;
height: 50px;
width: 500px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$('#div1').click(function() {
$('#div1').toggleClass('newClass');
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<table width="100%">
<tr style="height: 100%;">
<td style="width: 30%; height: 500px;">
</td>
<td style="width: 70%; height: 500px;">
<div style="width: 100%; height: 500px;">
<table style="height: 500px; width: 100%;">
<tr>
<td class="toggler">
<div id="div1" style="background-color: Black;">
Hello World!
</div>
</td>
<td style="width: 50%" class="toggler">
<div id="div2" style="background-color: Blue; width: 100%; height: 100%;">
</div>
</td>
</tr>
<tr>
<td style="width: 50%" class="toggler">
<div id="div3" style="background-color: Red; width: 100%; height: 100%;">
</div>
</td>
<td style="width: 50%" class="toggler">
<div id="div4" style="background-color: Maroon; width: 100%; height: 100%;">
</div>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</form>
究竟什么是我的代码的问题????请帮助..
注意:我也试过addClass与removeClass方法。没有好结果...
它应该涵盖所有的DIV?你想3个div不显示时,onclick div更大的权利?顺便说一句,他们为什么在桌子上? – Chanckjh
和z-index不使用px – Chanckjh
我需要将此函数应用于所有其他三个div ...并且是的,您是对的,我不想在显示其他三个div时放大其中任何一个... – writeToBhuwan