我构建了一个简单的 flexbox
布局,我试图让我的导航在 570px 或更小时切换,只有一个按钮显示“导航”。
当那个按钮被点击时,它应该切换 li 的隐藏类,然而,它不想这样做,我很困惑!
正如您从我的代码中看到的那样,我在 $(window).width()
上运行条件语句以查看它是否为 <= 570 并且然后为任何更大的尺寸运行 else 语句。
任何人都可以解决这个问题,因为出于某种原因我不能。
这是我的 CSS 和 jQuery。
CSS:
.hidden {
display: none;
}
/*
Nav Styles
*/
nav.nav-container {
display: flex;
width: 100vw;
background: #333;
justify-content: center;
align-items: center;
flex-wrap: wrap;
padding: 20px;
}
nav.nav-container > .nav-img {
justify-content: flex-start;
margin: 0 5px;
}
nav.nav-container > ul.unstyled-list {
list-style-type: none;
display: flex;
flex-direction: row;
flex-wrap: wrap;
flex-grow: 200;
justify-content: flex-end;
max-height: 2000px;
}
nav.nav-container > ul.unstyled-list > a {
text-decoration: none;
}
nav.nav-container > ul.unstyled-list > a > li.nav-item {
color: #ffffff;
font-weight: bold;
font-size: 20px;
text-align: center;
padding: 20px;
}
nav.nav-container > ul.unstyled-list > a > li.nav-item.active {
background: #666;
text-decoration: underline;
}
nav.nav-container > ul.unstyled-list > a > li.nav-item.active:hover {
background: #999;
}
nav.nav-container > button.open-btn {
border: 0;
width: 100px;
height: 40px;
display: none;
background: #000000;
color: #ffffff;
border: 1px solid #ffffff;
outline: none;
}
/*
Content Styles
*/
section.content {
display: flex;
flex-direction: row;
font-size: 20px;
}
section.content > div.left {
flex-grow: 1;
margin: 10px;
}
section.content > div.right {
flex-grow: 1;
margin: 10px;
}
.section-title {
text-align: center;
font-size: 250%;
}
/*
Basic Responsive Styles
*/
@media (max-width: 570px) {
/*
Nav Responsive Styles
*/
nav.nav-container {
padding: 0;
}
nav.nav-container > ul.unstyled-list {
flex-direction: column;
max-height: 2000px;
}
nav.nav-container > ul.unstyled-list > li{
}
nav.nav-container > button.open-btn {
display: block;
margin: 15px;
flex-grow: 1;
}
/*
Content Responsive Styles
*/
section.content {
flex-direction: column;
}
}
如您所见,它是基本的 flexbox 样式加上用于更改 flex-direction 等的媒体查询,还显示用于导航切换的按钮。
jQuery:
$(document).ready(function() {
if ($(window).width() <= 570) {
$('nav.nav-container > ul.unstyled-list > a > li').addClass("hidden");
$('nav.nav-container > .nav-img').addClass("hidden");
$('.open-btn').on('click', function() {
$('nav.nav-container > ul.unstyled-list > a > li.nav-item').toggleClass("hidden");
});
} else {
if ($('nav.nav-container > ul.unstyled-list > a > li').hasClass('hidden')) {
$('nav.nav-container > ul.unstyled-list > a > li').removeClass('hidden');
}
if ($('nav.nav-container > .nav-img').hasClass("hidden")) {
$('nav.nav-container > .nav-img').removeClass("hidden");
}
}
});
如果你也想同时查看 HTML、CSS 和 jQuery,还有我的代码笔的链接!
http://codepen.io/skulldev/pen/RPyEQa
提前感谢您的任何回复。
标准差
最佳答案
与之前的代码以及与 shans 的答案的混合过程中,有几处发生了变化。一旦我解决了 shans 的答案中的问题,我就转而使用 $(window).resize(function(){});再加上变量范围的变化,现在一切似乎都正常了!
$(window).resize(function() {
var nav_li = $('nav.nav-container > ul.unstyled-list > a > li');
var width = window.innerWidth || document.body.clientWidth;
if (width <= 570) {
nav_li.hide();
$('.nav-img').hide();
$('.open-btn').on('click', function() {
nav_li.toggle();
});
}
if (width > 570) {
$('.nav-img').show();
nav_li.show();
}
});
您可以在我的代码笔中看到完整的布局和代码更改:http://codepen.io/skulldev/pen/RPyEQa
关于javascript - 类切换 [jQuery/CSS],我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31362583/