web-dev-qa-db-ja.com

divをdisplay：noneに設定します。 javascriptまたはjQueryを使用する

簡単な答えになるはずの非常に簡単な質問があります。

JQueryを使用してメニューレベルを「ドリルダウン」するモバイルナビゲーションメニューがあります。レベルがロードされるたびに、jQueryはメニューの高さを決定し、それに応じて設定します。

現在のページに基づいてメインメニューの表示と非表示を切り替えるために、ボタンで次のスクリプトを使用しています。

<script type="text/javascript">
    (function ($) {
        $("a.BNnavTrigger").click(function (event) {
            event.preventDefault();
            $("div.drill-down-wrapper").slideToggle("9000");
        });
    })(jQuery);     
</script>

特定のページでメニューを「閉じた」状態で開始するには、display:none;のc​​ss値をdivに含める必要があることを知っています。これはすべて、1つの小さな問題でうまく機能しています。

最初にメニューを非表示にすると、jQueryドリルダウンメニュープラグインは非表示であることを検出し、メニューの高さを0pxに設定します。最初にメニューを非表示にしたページでメニューを切り替えると、ペイン内の他のすべてのコンテンツは正しく切り替わりますが、メニュー自体の高さは0のままです。

私の脳では、この問題に対する明らかな答えは、メニューが読み込まれ、その高さが設定された後、javascriptを介して、含まれているメニューdivを非表示にすることです。この音は正しいですか？

誰でもこれを行うための小さなスクリプトを提供できますか？私はjsの完全かつ完全な初心者です。この問題の処理方法に関して、他の誰かが別の推奨事項を持っていますか？

御時間ありがとうございます！アレックス

UPDATE！

ここでの問題のJSフィドル：http://jsfiddle.net/fyyG2/17/ *

javascriptjquerycssmobile
12
Alex Ritter

オンドキュメント準備完了 do $("#yourId").hide();。

例えば：

$(document).ready(function () {

     $("div.drill-down-wrapper").hide();
     var $drillDown = $("#drilldown");

        // (what ever your code is)
 });
16
Ani

この方法を試してください：

$("#yourId").css("display","none");

うまくいくはずです！

役に立てば幸いです。

15
Kiko Mesquita

Css値display：noneをcssファイルに追加すると、問題なく機能します。 http://jsfiddle.net/dxkX6/4/

しかし、あなたはあなたのhtmlファイルにタイプミスがあることがわかります：

$("a.BNnavTrigger").click(function (event) {
       ^

<a class="BNavTrigger">Toggle Menu</a>
        ^

それがおそらくあなたが問題を経験している理由ですか？

2
Edward

私はあなたの問題を完全に理解したかどうかわかりませんが、ここに考えがあります：

サイズを変更したり非表示にしたりする代わりに、隠したいものの不透明度を0に設定します。これにより、寸法は保持されますが、ユーザーには表示されません。

$('#id').css('opacity',0);

そして、要素を再表示するには：

$('#id').css('opacity',1);
1
Israel