gpt4 book ai didi

javascript - 切换关闭时 jquery div 不显示

转载 作者:太空狗 更新时间:2023-10-29 15:55:00 26 4
gpt4 key购买 nike

我似乎遇到了响应式 CSS 和 JQuery 的奇怪问题

  1. 当窗口大小调整为 600px 时
  2. 点击 hr(icon) 显示 Nav
  3. 再次单击 hr 以隐藏导航并调整窗口大小后,导航将不可见

如果导航可见然后调整大小 > 600px 导航始终可见。

问题是否与 jquery 代码有关?

代码在这里:https://jsfiddle.net/ag3tdeqe/

HTML:

<div class="container">
<div class="leftmenu">
<div class="logo">
<img src="http://callmenick.com/theme/callmenick/img/logo.svg" alt="" />
</div>
<div class="icon">
<hr/>
<hr/>
<hr/>
</div>
<div class="social">
<span class="fa fa-facebook"></span>
<span class="fa fa-instagram"></span>
<span class="fa fa-twitter"></span>
<span class="fa fa-youtube"></span>
<span class="fa fa-vine"></span>
<span class="fa fa-tumblr"></span>
<span class="fa fa-google-plus"></span>
<span class="fa fa-linkedin"></span>
</div>
<div class="nav">
<ul class="navigation">
<li> <a class="scroll" href="#home">Home</a>

</li>
<li> <a class="scroll" href="#videos">Videos</a>

</li>
<li> <a class="scroll" href="#gallery">Gallery</a>

</li>
<li> <a class="scroll" href="#about">About</a>

</li>
<li> <a class="scroll" href="#contact">Contact</a>

</li>
</ul>
</div>
</div>
</div>
</div>

CSS:

html, body {
margin:0 auto;
height: 100%;
}
.container {
margin-left: 250px;
height: 100%;
}
.leftmenu {
float:left;
width:250px;
margin-left: -250px;
background-color: #28aadc;
position: fixed;
height: 100%;
overflow: auto;
}
.logo {
display: block;
width: 60px;
text-align: center;
margin:0 auto;
margin-top: 30px;
margin-bottom: 0px;
height: 60px;
-webkit-transition: .3s;
transition: transform .3s;
}
.leftmenu .nav {
position: relative;
height: auto;
padding-bottom: 60px;
margin-top: -30px;
}
.leftmenu .nav ul {
height: auto;
width: auto;
text-align: center;
}
.leftmenu .nav ul li {
width: 100%;
}
.leftmenu .nav ul li > a {
text-align: center;
margin:0 auto;
margin-top: 15px;
width:80%;
display: block;
text-decoration: none;
color:#00648c;
font-family:'arkhip';
font-size: 15px;
padding:5px;
}
.leftmenu .nav ul li > a:hover {
color:white;
}
@media screen and (max-width:767px) {
.container {
margin-left: 0px;
}
.leftmenu {
width: 100%;
margin-left: 0px;
float:none;
position:relative;
height:80px;
}
.leftmenu > h1 {
font-size: 80%;
}
.leftmenu .nav {
display: block;
width: 90%;
padding:0px;
margin-top: -35px;
margin-right: 10px;
}
.leftmenu .logo {
margin:0 auto;
margin-top: 10px;
margin-left: 20px;
float:left;
}
.leftmenu .nav ul li {
width:100px;
display: inline-block;
}
.leftmenu .nav ul li > a {
width:20px;
margin:0 auto;
}
}
@media screen and (max-width:600px) {
.leftmenu {
max-height: 80px;
overflow: visible;
margin-top: -10px;
}
.icon {
display: block;
width: 30px;
float: right;
margin:0 auto;
padding:5px 10px 5px 10px;
margin-right: 30px;
margin-top: 20px;
}
.icon hr {
width:40px;
border:2px solid white;
margin:0 auto;
}
.icon hr:not(:nth-of-type(1)) {
margin-top: 10px;
}
.icon:hover {
cursor: pointer;
}
.leftmenu .nav {
display: none;
position: absolute;
left:0px;
right:0px;
float:none;
margin:0 auto;
width: 95%;
margin-bottom: 10px;
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.6);
top:80px;
padding-top: 10px;
background-color: white;
border-bottom: 1px solid #28aadc;
border-left: 1px solid #28aadc;
border-right: 1px solid #28aadc
}
.leftmenu .nav ul li {
display: block;
margin:0 auto;
}
.leftmenu .nav ul li:hover a {
color:black;
}
}

JQUERY:

$(".icon").click(function() {
$(".leftmenu .nav").toggle();
});

$(".leftmenu .nav ul li > a").click(function() {
$(".icon:visible").click();
});

最佳答案

线

$(".leftmenu .nav").toggle();

添加

display: none

第二次单击图标将其隐藏后转到您的菜单。

使用以下方法删除它:

$(window).resize(function() {
$(".leftmenu .nav").css("display", "");
});

关于javascript - 切换关闭时 jquery div 不显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32311556/

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