2

私が取り組んでいるサイトでは、jQuery .toggle() 関数を使用して、モバイル デバイスでサイトを表示するときにナビゲーションを表示および非表示にしています。私が使用しているコードは次のとおりです。

<script>

   $(document).ready(function() {
            $('.nav-toggle').click(function(){
                //get collapse content selector
                var collapse_content_selector = $(this).attr('href');                   

                //make the collapse content to be shown or hide
                var toggle_switch = $(this);
                $(collapse_content_selector).toggle(function(){
                    if($(this).css('display')=='none'){
                        toggle_switch.html('Show');//change the button label to be 'Show'
                    }else{
                        toggle_switch.html('Hide');//change the button label to be 'Hide'
                    }
                });
            });

        }); 
</script>

ナビゲーションを切り替えていますが、テキスト リンクが表示されません。Chrome で要素インスペクターを使用しましたが、overflow:hidden が .toggle() 関数によって要素にインラインで追加されていることがわかりますが、リンクを表示するように切り替えても削除されません。これについてはjQueryのドキュメントを見てきましたが、overflow:hiddenについては何も言及されていません。トグルボタンをクリックするまで表示されないため、これがこの関数によって追加されていることがわかります

サイトの URL は次のとおりです: http://theinfluence.iamchrisbarnard.com

トグル機能は右上のトグル アイコンに適用されていますが、小さなスクリーンサイズでのみ表示されます。そして、ページの一番上にある nav 要素を切り替えています。

この問題の原因は何ですか?

4

1 に答える 1

0

トグル メニューの背景画像を作成する代わりに、画像として追加してみてください。似たようなコードを書く

HTML

 <a href="javascript:void(0);" id="mobibtn" style="display:none;"><img src="images/icon_mobile_menu.jpg" alt="m"> Menu</a>

jQuery

$(window).resize(function() {
var windowWidth = $(window).width();
if (windowWidth < 366) {
    $('#nav').hide();
    $('#mobibtn').show();

} else {
    $('#nav').show();
    $('#mobibtn').hide();
    $('#mobimenu').hide();
}
});

$(window).load(function() {
var windowWidth = $(window).width();
if (windowWidth < 366) {
    $('#nav').hide();
    $('#mobibtn').show();

} else {
    $('#nav').show();
    $('#mobibtn').hide();
    $('#mobimenu').hide();
}
});

$(document).ready(function() {
$('#mobibtn').click(function() {
     $('#mobimenu').toggle();
});
});

( http://pfitr.net/frontend/index.htmlで実際の例を見ることができます)

于 2013-08-27T19:26:38.863 に答える