show/hide() 改变块级元素的宽度/行为？

Question

我真的被这个卡住了，不知道如何解决这个问题，我使用 jQuery ~ 通常没有太多问题。但是因为我不写 JS 我确实卡住了:( 我已经搜索并搜索了答案并尝试了太多方法但没有得到任何结果...... :(我敢打赌我错过了一些非常明显或简单的东西，希望有人能够提供帮助......

好的 - 问题： 我的网页设计课程有一个网站，它在左栏中显示了主导航。对于最小的屏幕（即宽度低于 420 像素） - 我想隐藏菜单，显示一个“查看菜单”链接，而不是使用 jQuery toggle() 函数按需显示/隐藏菜单。

最初，我只通过一个直接的切换来做到这一点 - 一切都很好 - 除了菜单一旦在小屏幕上显示和隐藏一次就会保持隐藏的问题。如果调整窗口大小 - 它将保持隐藏状态。

这就是我打算解决的问题，在这里提到它是因为我可能会完全走错路~怀疑我是否以正确的方式这样做:'(

现在 - 我正在使用 JS 隐藏所有屏幕的“查看菜单”链接，仅在小于 420 像素的屏幕上显示。我还添加了 resize() 函数以允许更多动态行为。 一切都按预期工作，以显示和隐藏我的菜单 - 但是....

切换链接本身设置为 display:block - 当窗口加载到 420 像素以下时，它会按预期显示：设置为 block（跨越整个宽度以获得良好的实心活动链接），文本居中。 但是，当我以较大的窗口大小加载页面时，然后将其调整为低于 420 像素的宽度 - 切换链接似乎变成了内联？不再全宽，文本似乎左对齐，因为元素不再是全宽...？！

我尝试在 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

Answer 1

当您在元素上调用 .show() 时，它会将 display 属性设置为以前的值，如果它不存在，我相信它会采用默认浏览器值，在您的情况下可能是 inline。尝试将其显式设置为block。

Answer 2

我不确定这里在做什么，因为我没有手机来测试它，但你能尝试用一个在 display:none 和 display:block 之间切换的 css 函数替换你的 hide/show 吗？

像这样：

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

Answer 3

几乎！未解决

一个解决方案，感谢 Vlad 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');                
});

Answer 4

查看我修改后的小提琴 http://jsfiddle.net/HWmp3/9/ 我在 iphone 模拟器上对此进行了测试，它可以工作。我的测试是将代码复制到本地文件并进行测试。我把所有的js放在document.ready里面

确保您在标题中有元数据

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