0

相対的に配置されたコンテナ内の絶対位置を使用して、メイン コンテナの上に「オーバーレイ」する div があります。hideボタンをクリックすると、クラスを削除して表示されるようにしようとしています。コンソールにエラーが表示されなくても（そして非表示にはなりませんが）、効果がないようにnewThread見えます。 

<div id='newThread' class='hide'>
    <form>
        <textarea></textarea>
    </form>
</div>

 #container { position: relative; }

 #newThread { 
 position: absolute;
 top: 50px;
 background-color: rgba(239, 239, 239, 0.9);
 left: 50px; width: 600px;
 min-height: 480px; border-radius: 5px;
 box-shadow: 5px 2px 5px #888; 
 }

 .hide { display: none; }

 $('#sidebar').html('<h1>Welcome to the forum!</h1><div class="container"><button class="btn btn-default" id="newThreadButton">New Topic</button><br /><button class="btn btn-default">Log out</button></div>');
 $('#sidebar').fadeIn();
 $('#newThreadButton').click(function() {
     $('#newThread').removeClass('hide');                       
 });

alert($('#newThread').hasClass('hide'));出力しますfalse。

http://jsfiddle.net/YBqMn/

4

4 に答える 4

1

アニメーションはおそらくstyle="display:none;"要素で実行されています。クラスの非表示を削除する代わりに、実行してみてください$(element).show();

フィドルを見た後、あなたはz-index: -1#newThread を持っています。これを に変更するz-index: 2000と、オーバーレイが表示されます。（これがあなたの望むものかどうかはわかりません）

あなたのフィドルを更新しました： http://jsfiddle.net/YBqMn/1/

于 2013-08-14T23:49:32.050 に答える
0

ページに存在しない要素に機能を割り当てています。最初の行に次のように書くことができます：

<button class="btn btn-default" onclick="$('#newThread').removeClass('hide')">
于 2013-08-14T23:34:58.290 に答える
0

私の間違いはnewThread、ajax 呼び出しでワイプしていたのと同じコンテナーを入れていたため、サイドバーを更新したときに要素が存在しなかったことです。ドキュメントの読み込み時に問題なく出力されていたundefinedときに、サイドバーのアニメーションが開始されたときにこれを理解しました。newThreadフォームをdivから分離するために、フォームの周りにラッパーを追加する必要がありました。z-index: -1それが問題を引き起こしていたので、私も削除する必要がありました。

于 2013-08-15T02:44:44.107 に答える