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

show/hide() changing block level element's width/behaviour?

本文关键字：元素 行为 hide show      更新时间：2023-09-26

我真的很纠结这个，不知道如何解决这个问题，我使用 jQuery ~ 通常没有太多问题。但是因为我不写JS，所以我确实陷入了:(我搜索了又寻找答案，尝试了太多的方法，但一无所获...... :(我敢打赌我错过了一些非常明显或简单的东西，希望有人能够提供帮助......

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

最初，我仅通过直接的切换来执行此操作 - 一切都很好 - 除了菜单一旦显示就会保持隐藏并在小屏幕上隐藏一次的问题。如果调整窗口大小 - 它将保持隐藏状态。

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

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

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

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

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

我不确定这里在做什么，因为我没有手机来测试它，但是您能否尝试用在显示：无和显示：块之间切换的 css 函数替换您的隐藏/显示？

喜欢这个： 

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

几乎！未解决

一个解决方案，感谢弗拉德·拉杜列斯库(在福尔斯特上(~通过这个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');                
});

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

确保标题中有元

<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
相关文章：