1

私は本当にこれに固執していて、これを解決する方法がわかりません。私はjQueryを使用しています〜通常はあまり問題はありません。しかし、私はJSを書かないので、行き詰まります:(私は答えを検索して検索し、あまりにも多くのアプローチを試しましたが、どこにも行きませんでした...:(私は非常に明白または単純な何かを見逃しているに違いありません。誰かが助けることができるかもしれません...

わかりました-問題：左の列にメインナビゲーションを表示するWebデザインコースのWebサイトがあります。最小の画面（つまり、幅420px未満）の場合-メニューを非表示にしたいのですが、代わりに「メニューの表示」リンクを表示します。これは、jQueryのtoggle（）関数を使用してオンデマンドでメニューを表示/非表示にします。

最初は、メニューが表示された後は非表示のままになり、小さな画面で一度非表示になるという問題を除けば、単純なトグルだけでこれを実行しました。ウィンドウのサイズが変更された場合、ウィンドウは非表示のままになります。

それは私が解決しようと試みた問題であり、私はここで完全に間違った道を進んでいる可能性があるので、ここでそれについて言及しました〜私がこれを正しい方法で行っているかどうか疑問に思います：'（

現在-私はJSを使用して、すべての画面の[メニューの表示]リンクを非表示にし、420px未満の画面にのみ表示しています。より動的な動作を可能にするために、resize（）関数も追加しました。すべてが私のメニューの表示と非表示の意図どおりに機能しています-しかし....

トグルリンク自体はdisplay：blockに設定されています-ウィンドウが420px未満に読み込まれると、意図したとおりに表示されます：テキストを中央に配置してブロック（完全なアクティブリンクの場合は全幅にまたがる）に設定されます。ただし、より大きなウィンドウサイズでページをロードしてから、幅が420px未満にサイズ変更すると、トグルリンクがインラインになりますか？もはや全幅ではなく、要素が全幅ではなくなったため、テキストは左揃えで表示されます...？！

CSSで幅を設定し、resize（）要素を使用してリセットし、JSを介して100％の幅を割り当ててみましたが、何も機能していません。何かが足りないと確信しています。

私は本当にどんなポインタや考えにも感謝します〜私はここで非常に基本的な何かを逃しているように感じます....

ウェブサイト：webeyedea.info

これが私のJSコードで、jQueryへのリンクをたどっています。

// check for window size size on page load and show relevant content only 
$(function() {
    if ($(window).width() > 420) {
        $('#toggle-nav').hide();
        $('nav ul').show();
    }
    else {
        $('#toggle-nav').show();
        $('nav ul').hide();
    }
});
// check for window resize - show nav again for larger screens after hiding
$(window).resize(function() {
    if ($(window).width() > 420) {
        $('#toggle-nav').hide();
        $('nav ul').show();
    }
    else {
        $('#toggle-nav').show();
        $('nav ul').hide();
    }
});

// show menu (smallest screens)
$('nav #toggle-nav').click(function() {
    $('nav ul').slideToggle('slow', function() {
        // Animation complete.  
    });
    $('ul').addClass('view');
});

更新：JSFIDDLEを参照してください

4

4 に答える 4

1

要素を呼び出す.show()と、表示プロパティが以前の値に設定されます。存在しない場合は、デフォルトのブラウザー値が使用されるinlineと思います。明示的に に設定してみてくださいblock。

于 2012-05-08T18:24:53.710 に答える
1

テストするモバイルがないため、ここで何をしているのかわかりませんが、非表示/表示を、 display:none と display:block を切り替える css 関数に置き換えてみてください。

このような ：

$('#toggle-nav').css('display','none');
$('#toggle-nav').css('display','block');
于 2012-05-08T18:28:06.217 に答える
0

私の改訂されたフィドルを参照してください http://jsfiddle.net/HWmp3/9/ 私はこれをiphoneシミュレーターでテストしました、そしてそれは動作します。私のテストでは、コードをローカルファイルにコピーしてテストしました。すべてのjsをdocument.readyの中に入れました

ヘッダーにメタがあることを確認してください

<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
于 2012-05-08T19:33:23.557 に答える
0

ほとんど ！解決されていない

1つの解決策、Vlad Radulescu（Forrst上）のおかげで〜このjsfiddleフォークを介して

$('a#toggle-nav').css('display','none');

// Show the menu if Window width is less than 420
$(window).resize(function() {
    if ( $(window).width() > 420 ) {                    
        $('#toggle-nav').css('display','none');
        $('nav ul').show();                 
    }
    else {
        $('#toggle-nav').css('display','block');
        $('nav ul').hide();
    }            
});

// Slide the Menu on smaller screens
$('nav #toggle-nav').click(function() {
        $('nav ul').slideToggle('slow');                
});
于 2012-05-09T13:55:20.867 に答える