Question

对于你们许多人来说，我的问题相当简单。我想扩展div（onClick）以适应外部div，它应该完全覆盖所有其他三个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方法..没有好结果......

Answer 1

像这样的事情。 jsfiddle：http://jsfiddle.net/4L5fw/2/

HTML：

<div class="wrapper">
    <div class="black"></div>
    <div class="blue "></div>
    <div class="red"></div>
    <div class="green"></div>
</div>

的CSS：

.wrapper{
    width: 500px;
    height: 500px;
}
.black{
    width: 250px;
    height: 50px;
    background: black;
}
.blue{
    width: 250px;
    height: 250px;
    background: blue;
}

.red{
    width: 250px;
    height: 250px;
    background: red;
}
.green{
    width: 250px;
    height: 250px;
    background: green;
}

div{
    float: left;
}


.active{
    height: 100%;
    width: 100%;
}

.hide{
    display: none;
}

jquery的：

$(document).ready(function(){
    $('.wrapper div').click(function() {
        $(this).toggleClass('active');
        $(this).siblings().not(this).toggleClass('hide');
    });
});

Answer 2

这似乎工作正常。

<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>

jsFiddle链接：http://jsfiddle.net/3tkpa/

如果单击黑色div，它会展开。当它被展开并单击时，它会崩溃。

单击时展开div

2 个答案: