0

Javascriptを使用した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>

script.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();
}

});


        });

私が問題を解決するのを助けることができる考えを持って来てください。

4

3 に答える 3

1

div のセレクターをハードコーディングしないでください。このようにして、単一の div を超えて展開できます。

次のようなものを使用します。

$('button').on('click',function(){
    $(this).parent('div').css({'width' : '50%'});
});

例

于 2012-06-14T06:21:04.563 に答える
0

相対パスを使用する/例

$(this).parent().css("width","50%");

したがって、クリックされた (+/-) 要素を含むボックスのスタイルを常に設定します。

$(".box1") 表示/非表示コードも調整する必要があります。Pulkitが言ったように、IDの代わりにクラスを使用する必要があります。(親の下にあるクラス ("box1") を持つ子を選択します。

$(this).parent().children("#box1")
于 2012-06-14T06:25:10.047 に答える
0

各 div 要素に異なる ID を指定し、クラスも指定して、クラス (.) の代わりに ID (#) を使用して jQuery 関数を実行してみてください。

于 2012-06-14T06:20:29.633 に答える