0

ボタンのクリックでdivの1つ（最初の1つ）を非表示または表示できるjQueryスクリプトを作成しましたhide

コードはスクリプトで次のようになります。

$('.hideButton').click( function() {
    var toggleWidth = $(".first").width() == 100 ? "10px" : "100px";
    $('.first').animate({ width: toggleWidth},200);

    if ( $('.first').width() == 10 ){
        $(".content").attr("hidden",false);
    }
    else if ( $('.first').width() == 100 ){
        $(".content").attr("hidden",true);
    }

});

HTML:

<div class="contain">
    <div class="row">
            <div class="navigation">
                navigation
            </div>
            <div class="advert">
                advert
            </div>
    </div>
    <div class="row">
        <div class="main">
            main
            <br/>
            <button class="hideButton">hide</button>
            <br/>
            <div class="first">
                1
            </div>
            <div class="second">
                2
            </div>
            <div class="third">
                3
            </div>
        </div>
    </div>
</div>

CSS:

.row{
   margin-left:0px;
}
.navigation{
    height:100px;
    background-color:orange;
    width:400px;
    display:inline-block;
}
.advert{
    height:100px;
    background-color:lime;
    width:200px;
    display:inline-block;
}
.main{
    width:600px;
    height: 300px;
    background-color: magenta;
}
.first{
   width:100px;
    height:80%;
   background-color: yellow;
   display:inline-block;
}
.second{
   width:100px;
   height:80%;
   background-color: blue;
    display:inline-block;
}
.third{
   width:100px;
    height:80%;
   background-color: red;
    display:inline-block;
}

そして、最善の方法は、jsfiddle でそれを見ることです: http://jsfiddle.net/dzorz/EhjeA/

今、他の2つのdivに問題があります。非表示ボタンをクリックすると、最初の div がアニメーション化され、アニメーションの他の 2 つの div は両方とも最初の div の最後までスキップし、アニメーションが完了すると元の位置に戻ります..本当に面倒で、方法がわかりませんそれを解決するために...

ボタンをクリックすると非表示になり、他のものに影響を与えない1つのdivが必要です...

この例は修正可能ですか、それとも同じことを行う素敵な jQuery プラグインを提案してもらえますか?

4

3 に答える 3

2

これら 3 つを として表示する代わりに、CSS でinline-block使用する代わりに、表示を削除して左にフロートさせます。float: left

JSFiddleデモ

.first{
   width:100px;
   height:80%;
   background-color: yellow;
   float: left;
}
.second{
   width:100px;
   height:80%;
   background-color: blue;
   float: left;
}
.third{
   width:100px;
   height:80%;
   background-color: red;
   float: left;
}
于 2013-09-17T14:58:37.120 に答える
1

これを CSS に追加してみてください。

.first,.second,.third {
    vertical-align: top;
}

アニメーション中、overflowが に設定されoverflow: hidden、他のインライン要素が下にシフトします。を追加vertical-align: topすると、問題が解決するはずです。

更新されたフィドル: http://jsfiddle.net/EhjeA/3/

于 2013-09-17T14:56:04.507 に答える
1

問題のある div を固定幅のラッパーでラップできます: http://jsfiddle.net/EhjeA/1/

.wrapper {
    display: inline-block;
    width: 100px;
}

<div class="wrapper">
  <div class="first">
    1
  </div>
</div>
于 2013-09-17T14:58:46.280 に答える