gpt4 book ai didi

javascript - 显示/隐藏()改变 block 级元素的宽度/行为?

转载 作者:行者123 更新时间:2023-11-30 18:27:20 24 4
gpt4 key购买 nike

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

好的 - 问题:我有一个网页设计类(class)网站,它在左栏中显示了主导航。对于最小的屏幕(即宽度低于 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

最佳答案

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

关于javascript - 显示/隐藏()改变 block 级元素的宽度/行为?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10504091/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com