媒体查询和jquery“.slideToggle()”会在调整大小时更改li元素的可见性
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了媒体查询和jquery“.slideToggle()”会在调整大小时更改li元素的可见性相关的知识,希望对你有一定的参考价值。
我创建了一个响应式导航栏设计,起初看起来效果很好,但我偶然发现了这个奇怪的错误,一旦你在移动视图中按下汉堡菜单图标并将视口升级到大断点,它就会改变ul元素的可见性。你可以在this pen找到它。
这是它背后的javascript(JQuery):
"use strict";
$("#one").click(function(event) {
$("#dropdown-1").slideToggle();
$("#dropdown-2").slideUp();
$("#dropdown-3").slideUp();
event.stopPropagation();
});
$("#two").click(function(event) {
$("#dropdown-2").slideToggle();
$("#dropdown-1").slideUp();
$("#dropdown-3").slideUp();
event.stopPropagation();
});
$("#three").click(function(event) {
$("#dropdown-3").slideToggle();
$("#dropdown-1").slideUp();
$("#dropdown-2").slideUp();
event.stopPropagation();
});
$('html').click(function() {
$("#dropdown-1").slideUp();
$("#dropdown-2").slideUp();
$("#dropdown-3").slideUp();
});
$('#navicon').click(function() {
$("#links").slideToggle();
$("#social").slideToggle();
$("#social").css("display", "flex");
});
根据菜单的状态,此错误的工作方式不同。如果再次隐藏它并调整窗口大小,则不会显示这些内容。如果将其保持打开状态,其显示属性将保持“阻止”状态。
我尝试创建“display:flex;”桌面断点的规则,但它不会完成这项工作。我希望你能帮我找到解决方案。
答案
你只需要让你.links
类display:flex;
重要如下:
@media screen and (min-width: 768px) {
#links,
#lang,
#main-nav {
display: flex !important;
}
}
这是因为在移动版本中,您使用JQuery设置了display:block;
的链接,并且使用> 768破坏了您的设计,
见下面的工作片段:
"use strict";
$("#one").click(function(event) {
$("#dropdown-1").slideToggle();
$("#dropdown-2").slideUp();
$("#dropdown-3").slideUp();
event.stopPropagation();
});
$("#two").click(function(event) {
$("#dropdown-2").slideToggle();
$("#dropdown-1").slideUp();
$("#dropdown-3").slideUp();
event.stopPropagation();
});
$("#three").click(function(event) {
$("#dropdown-3").slideToggle();
$("#dropdown-1").slideUp();
$("#dropdown-2").slideUp();
event.stopPropagation();
});
$('html').click(function() {
$("#dropdown-1").slideUp();
$("#dropdown-2").slideUp();
$("#dropdown-3").slideUp();
});
$('#navicon').click(function() {
$("#links").slideToggle();
$("#social").slideToggle();
$("#social").css("display", "flex");
});
body {
font-family: sans-serif;
background-color: #333;
margin: 0 auto;
}
a {
text-decoration: none;
}
nav {
background-color: #111;
position: absolute;
width: 100%;
padding-top: 4px;
}
#main-nav {
display: flex;
}
.brand {
margin-left: 4px;
}
ul {
list-style-type: none;
padding: 0;
}
#links {
display: flex;
width: 100%;
}
#links li {
text-align: center;
flex-basis: 15vw;
margin: auto 1vw;
}
#social {
display: flex;
}
#social li {
margin: auto 1.2vw;
}
nav a {
color: #aaa;
font-size: 1.1em;
}
nav a:hover {
color: #fff;
}
.caret {
font-size: 0.8rem;
}
.dropdown {
position: absolute;
background-color: #111;
text-align: center;
width: 15vw;
border-radius: 3%;
margin-top: 1vh;
display: none;
}
.dropdown li {
border-top: 1px solid #777777;
border-radius: 2%;
padding-top: 1vh;
padding-bottom: 1vh;
}
#navicon {
margin: auto 2vw auto 1vw;
font-size: 2.5em;
display: none;
background-color: transparent;
color: #fff;
border: none;
}
@media screen and (max-width: 768px) {
#social,
#links,
.dropdown a {
font-size: 0.9em;
}
#social li {
margin: auto 1.8vw;
}
#social,
#links,
#dropdown {
display: none;
}
}
@media screen and (max-width: 767px) {
#social,
#links,
.dropdown {
width: 100%;
justify-content: center;
position: relative;
flex-wrap: wrap;
display: none;
}
#navicon {
display: flex;
}
#main-nav {
justify-content: space-between;
flex-wrap: wrap;
flex-basis: 100vw;
}
#links li {
flex-basis: 100vw;
margin: 1em auto;
border: 1px solid transparent;
font-size: 1.3em;
}
#social li {
font-size: 1.5em;
padding-left: 1em;
}
.main-link {
font-size: 1.8rem;
}
}
@media screen and (min-width: 768px) {
#links,
#lang,
#main-nav {
display: flex !important;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<nav>
<div id="main-nav">
<a href="index.html" class="brand"><img src="img/logo/logo.png" alt="Logo" /></a>
<button id="navicon" aria-label="menu"><i class="fa fa-bars" aria-hidden="true"></i></button>
<ul id="links">
<li><a href="javascript:void(0)" id="one" class="main-link">Header <span class="caret">▼</span></a>
<ul class="dropdown" id="dropdown-1">
<li><a href="#">Element</a></li>
<li><a href="#">Element</a></li>
<li><a href="#">Element</a></li>
<li><a href="#">Element</a></li>
<li><a href="#">Element</a></li>
<li><a href="#">Element</a></li>
</ul>
</li>
<li><a href="#" class="main-link">Element</a></li>
<li><a href="javascript:void(0)" id = "two" class="main-link">Header <span class="caret">▼</span></a>
<ul class="dropdown" id="dropdown-2">
<li><a href="#">Element</a></li>
<li><a href="#">Element</a></li>
</ul>
</li>
<li><a href="javascript:void(0)" id="three" class="main-link">Header <span class="caret">▼</span></a>
<ul class="dropdown" id="dropdown-3">
<li><a href="#">Element</a></li>
<li><a href="#">Element</a></li>
<li><a href="#">Element</a></li>
<li><a href="#">Element</a></li>
</ul>
</li>
</ul>
<ul id="social">
<li id="youtube"><a aria-label="youtube_channel" href="https://www.youtube.com/" target="_blank" rel="noopener"><i class="fa fa-youtube-play fa-lg"></i></a></li>
<li id="facebook"><a aria-label="facebook_page" href="https://www.facebook.com/" target="_blank" rel="noopener"><i class="fa fa-facebook-official fa-lg"></i></a></li>
</ul>
</div>
</nav>
以上是关于媒体查询和jquery“.slideToggle()”会在调整大小时更改li元素的可见性的主要内容,如果未能解决你的问题,请参考以下文章