show/hide（）更改塊級元素的寬度/行爲？

Question

我真的堅持這一個，不知道如何解決這個問題，我使用jQuery〜通常沒有太多的問題。但是，因爲我不寫JS，所以我被困住了:( 我搜索了並且搜索了答案，並嘗試了太多的方法，並且沒有得到任何地方...... :(我敢打賭，我錯過了一些非常明顯或者簡單的東西，希望有人可以幫助...

好的 - 問題： 我有一個網站爲我的網頁設計課程，它顯示了左側欄中的主導航對於最小的屏幕（即低於420px寬度） - 我想要隱藏菜單，而不是使用jQuery toggle（）函數根據需要顯示/隱藏菜單的'視圖菜單'鏈接

最初，我通過一個簡單的直接切換 - 除了一旦顯示並隱藏菜單後菜單仍然隱藏的問題一個小屏幕。如果窗口調整大小 - 它將保持隱藏狀態。

那是我着手解決這個問題，在這裏提它，我可能會去錯了路完全這裏〜懷疑我是否以正確的方式做這個：'（

現在 - 我我使用JS來隱藏所有屏幕上的「視圖菜單」鏈接，只顯示在小於420像素的屏幕上，我還添加了resize（）函數以允許更多的動態行爲 所有內容都按預期顯示隱藏我的菜單 - 但....

切換鏈接本身設置爲顯示：塊 - 當窗口加載低於420px時，它會按照預期顯示：設置爲塊（跨越完整寬度的一個很好的固體活動e鏈接），文字居中。 但是，當我以較大的窗口大小加載頁面，然後調整到420px寬度以下時 - 切換鏈接似乎變爲內聯？不再是全角，文字看起來是左對齊的，因爲元素不再是全角...？！

我試着在CSS設置寬度，試圖通過調整大小（）元件復位，通過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'); 
}); 

UPDATE：SEE JSFIDDLE

Answer 1

當您在元素上調用.show()它的顯示屬性設置爲先前的值，如果不存在的話，我相信它需要這可能是你的情況inline默認瀏覽器的價值。嘗試將其明確設置爲block。

Answer 2

我不知道什麼是在這裏做什麼，因爲我沒有移動來測試它，但你可以嘗試與顯示器之間切換一個CSS功能，以取代你的隱藏/顯示：none和顯示：塊？

像這樣：

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

Answer 3

見我的修訂小提琴 http://jsfiddle.net/HWmp3/9/ 我測試了在iPhone模擬器和它的作品。我的測試是將代碼複製到本地文件並進行測試。我把所有的JS的document.ready內

請確保您有元在頭

<meta name = "viewport" content = "width=device-width, initial-scale=1.0"> 

Answer 4

差不多！不解決

一個解決方案，通過此感謝弗拉德Radulescu（上Forrst）〜jsfiddle fork

$('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');     
});