2

私の問題は多くの人にとってかなり単純です。div（onClick）を拡張して、外側のdivに合わせたいのですが、他の3つの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メソッドも試しました。良い結果はありません...

4

2 に答える 2

6

このようなもの。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');
    });
});

</ p>

于 2012-12-26T21:05:20.910 に答える
0

これはうまくいくようです。

<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をクリックすると、展開されます。展開してクリックすると折りたたまれます。

于 2012-12-26T20:04:00.510 に答える