Question

我真的坚持这个并且不知道如何解决这个问题，我使用jQuery~通常没有太多问题。但是，由于我不写JS，我确实被卡住了:( 我已经搜索并搜索了答案并尝试了太多的方法而没有得到任何地方... :(我打赌我错过了一些非常明显或简单的东西，希望有人能够提供帮助... < / p> 好的 - 问题：我有一个网站，用于我的网页设计课程，显示左栏中的主导航。对于最小的屏幕（即低于420px宽度） - 我想隐藏菜单，显示一个查看菜单＆＃39;链接，它使用jQuery toggle（）函数按需显示/隐藏菜单。

最初，我通过单独的直接切换完成了这一切 - 一切都很好 - 除了菜单在小屏幕上显示和隐藏一次后仍然隐藏的问题。如果调整窗口大小 - 它将保持隐藏状态。

这是我着手解决这个问题，在这里提它，我可能会去错了路完全这里〜怀疑是否我＆＃39; M用正确的方式做这个：＆＃39;（

现在 - 我正在使用JS隐藏视图菜单＆＃39;所有屏幕的链接，仅显示在小于420px的屏幕上。我还添加了resize（）函数以允许更多动态行为。一切都按照预期显示和隐藏我的菜单 - 但是......

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

我已尝试在CSS中设置宽度，尝试使用via 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

看我修改过的小提琴 http://jsfiddle.net/HWmp3/9/ 我在iphone模拟器上测试了它，它的工作原理。我的测试是我将代码复制到本地文件并进行测试。我把所有的j放在document.ready

中

确保标题中包含元

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

Answer 4

ALMOST！尚未解决

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

show / hide（）更改块级元素的宽度/行为？

4 个答案: