4

コードを jsFiddle にアップロードします。そこで見ることができます。

http://jsfiddle.net/SrT2U/2/

リンクをクリックすると、非表示の FAQ セクションが表示され、他の div が押し下げられます。しかし、それは私が望んでいることではありません。他のすべての div をそのままにしておき、非表示の FAQ セクションを一番上に表示する必要があります。それを行う方法がわからない。これを HTML、CSS、または jQuery で行うべきかどうかさえわかりません。

私のjQueryコード:

$(function(){
    $(".OpenTopMessage").click(function () {
        $("#details").slideToggle("slow");
    });
});

HTML コード:

<div style="border: 1px solid #000;">
    <span>link</span>
    <span>&nbsp;&nbsp;|&nbsp;&nbsp;</span>
    <span>link</span>
    <span>&nbsp;&nbsp;|&nbsp;&nbsp;</span>
    <span>link</span>
    <span>&nbsp;&nbsp;|&nbsp;&nbsp;</span>
    <span>link</span>
    <span>&nbsp;&nbsp;|&nbsp;&nbsp;</span>
    <span>link</span>
    <span>&nbsp;&nbsp;|&nbsp;&nbsp;</span>
</div>

<div id="faqBox">
   <table width="100%">
<tr><td><a href="#" id="openFAQ" class="OpenTopMessage">this is hte faq section</a></td>
</tr>
    </table>

    <div id="details" style="display:none">
    <br/><br/><br/><br/><br/><br/><br/><br/>
 the display style property is set to none to ensure that the element no longer affects the layout of the page
 <br/><br/><br/><br/><br/><br/><br/><br/>
    </div>
</div>
<br/><br/>
<div style="background:#c00;">other stuff heren the height reaches 0 after a hiding animation, the display style property is set to </div>
4

3 に答える 3

3

あなたはdivで使用することができposition:absoluteます#details。

例： http： //jsfiddle.net/SrT2U/9/

あなたはそれを整列させるためにをいじる必要があるでしょうmargin。

編集：margin:0 auto; FAQボックスを中央に配置するために使用していることに気づきます。ボックスを並べるには、別の方法を見つける必要があるかもしれません。

編集2：

FAQ divを#faqboxテーブル内に配置してから、div内に変更するmargin:0 auto;と、すべてうまく機能することに気付きました。margin-top: 20px; margin-left:-16px;#details

例2： http: //jsfiddle.net/SrT2U/13/

注意：div内部tableなどを配置することは仕様に準拠したコードではありませんが、FAQを中心に配置することで機能します。

于 2012-11-17T22:32:38.600 に答える
3

簡単な修正はposition:absolute、faqBox div に追加するだけです。

jsFiddle の例

Position:absoluteドキュメントの流れから要素を取り出し、この場合、他の要素の上に表示し、押し下げないようにします。

于 2012-11-17T22:31:41.507 に答える
1

他の要素の位置を変更せずにdivを他の要素の上に表示する場合は、positionのCSSプロパティをabsoluteに設定する必要があります。

cssファイルで以下を指定します。

#details{
    position: absolute;
    left: 100px;//your desired position as regard to the left of your window
    top: 100px;//your desired position as regard to the top of your window
}

次のようにjQueryを使用してこれを行うこともできます。

$(".OpenTopMessage").click(function () {
    $("#details").slideToggle("slow");
    $("#details").css("position", "absolute");
    $("#details").css("left", "40px/*some value*/");
    $("#details").css("top", "40px/*some value*/");
});

それでもウィンドウの中央にポップアップボックスを配置したい場合は、jQueryを使用して次のように中央に配置できます。

$(".OpenTopMessage").click(function () {
    $("#details").slideToggle("slow");
    $("#details").css("position", "absolute");
    window_width = $(window).width(); //Get the user's window's width
    window_height = $(window).height(); //Get the user's window's height
    $("#details").css("left", (window_width-$("#details").width())/2);
    $("#details").css("top", (window_height-$("#details").height())/2);
});

次に、ボックスが中央に配置されます。

また、「これはよくある質問のセクションです」というボタンがdivでカバーされていることもありますが、閉じるボタンを追加するか、次のコードを追加することで、ポップアップボックスを簡単に閉じることができます。

$("body:not(#details)").click(function() {
    $("#details").slideToggle("slow");
});

これにより、ページの任意の部分をクリックして、div自体を除くターゲットのdiv#detailsを閉じることができます。

通常、ポップアップボックスまたはダイアログを作成しようとしている場合は、jQuery UI（http://jqueryui.com/dialog/）やblockUI（http：// www .malsup.com / jquery / block /）。前者はダイアログのみをサポートしますが、後者はすべての種類のポップアップボックスをサポートします。

于 2012-11-17T22:34:44.667 に答える