1

我真的被这个卡住了，不知道如何解决这个问题，我使用 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

4

4 回答 4

1

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

于 2012-05-08T18:24:53.710 回答
1

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

像这样 ：

$('#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

几乎 ！未解决

一种解决方案，感谢 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 回答