0

slideToggle 関数を使用して、div の上にテキスト/div をスライドさせる方法を見つけようとしています。

基本的に、ユーザーがクリックできるようにタブを突き出させたいと思っています（現在はテキストだけです）。クリックするとポップアップがスライドします。私はすべてを設定しましたが、問題は、div がスライドするときに、トグル ボタンもその上にスライドする必要があることです。

JS フィドルは次のとおりです: http://jsfiddle.net/c2WaV/1/ (右下隅のトグルを参照)。

jQuery:

$(document).ready(function () {

    $(".questionBox").hide();
    $(".toggle").show();

    $('.toggle').click(function () {
        $(".questionBox").slideToggle();
    });

});

HTML:

<body>
    <a href="#" class="toggle">Toggle</a>

    <div class="questionBox">
        Info inside the toggled box
    </div>
</body>

CSS

.questionBox {
    display:none;
    position:absolute;
    bottom:0;
    right: 20px;
    height:200px;
    background-color: grey;
    color: #FFFFFF;
    padding:20px;
}
.toggle {
    display:none;
    position:absolute;
    bottom:0;
    right: 0;
}

スライドしているdivの高さまでスライドするように設定する必要がありますか? これを行う簡単でクリーンな方法があることを願っています。

乾杯、 ロブ

4

2 に答える 2

1

私が作成したこのフィドルを見てください

JSFiddle

だから私がしたことは、すべてのコンテンツを #container にラップし、それに .toggle スタイルを与えたので、すべてのコンテンツを下部に絶対的なコンテナに入れました。次に、絶対配置を削除しました質問ボックスが DOM スペースを取り戻し、上にスライドするとすべてが押し上げられます。

最終的なコードは

<div id="container">
    <a href="#" class="toggle">Toggle</a>
    <div class="questionBox">Info inside the toggled box </div>
</div>

.questionBox {
    display:none;
    height:200px;
    background-color: grey;
    color: #FFFFFF;
    padding:20px;
}
#container {
    display:none;
    position:absolute;
    bottom:0;
    right: 0;
}

私もいくつかの調整を行いました ここに新しいリンクがあります

JSFiddleNew

jQueryをこれに変更したことに注意してください

var $questionBox = $(".questionBox");

$questionBox.hide();
$("#container").show();

$('.toggle').click(function () {
    $questionBox.slideToggle();
});

$ は関数であるため、同じ要素を使用している場合は、要素を 2 回フェッチする代わりに、変数で定義して再利用する必要があります。これにより、パフォーマンスが向上します。

于 2013-06-07T19:59:40.527 に答える