我目前正在为移动设备创建一个导航栏,它会在按下按钮时展开。它为内容扩展一定数量的像素。当关闭按钮出现时,它应该关闭回到按钮的原始大小。它会适本地放大但不会缩小。这是我的代码的基本版本。
我尝试过创建变量和大量其他东西,老实说我不记得我到底做了什么。
我的 HTML:
<div class="navbar-background">
</div>
<div class="mobile-navbar-button">
<div class="bar-1">
</div>
<div class="bar-2">
</div>
<p class="closebtn">×</p>
</div>
我的 CSS:
.mobile-navbar-button {
background-color: blue;
width: 90px;
height: 90px;
border-radius: 50%;
position: fixed;
left: 2vw;
top: 30px;
transition: 0.5s;
z-index: 0;
}
.navbar-background {
background-color: rgba(0, 0, 0, 0.9);
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
}
.closebtn {
color: white;
font-size: 100px;
position: fixed;
top: -80px;
left: 35px;
display: none;
transition: 0.8s;
}
.bar-1 {
background-color: white;
width: 54px;
height: 3px;
position: fixed;
top: 65px;
left: 37px;
}
.bar-2 {
background-color: white;
width: 54px;
height: 3px;
position: fixed;
top: 85px;
left: 37px;
}
我的 jQuery:
$(document).ready(function() {
$(".mobile-navbar-button").on('touchstart', function() {
$('.mobile-navbar-button').css('width', '1425px');
$('.mobile-navbar-button').css('height', '1200px');
$('.mobile-navbar-button').css('left', '-400px');
$('.mobile-navbar-button').css('top', '-400px');
$('.mobile-navbar-button').find('.bar-1').css('display', 'none');
$('.mobile-navbar-button').find('.bar-2').css('display', 'none');
$('.closebtn').css('display', 'block');
});
$(".closebtn").on('touchstart', function() {
$('.mobile-navbar-button').css('width', '90px');
$('.mobile-navbar-button').css('height', '90px');
$('.mobile-navbar-button').css('left', '2vw');
$('.mobile-navbar-button').css('top', '30px');
$('.mobile-navbar-button').find('.bar-1').css('display', 'block');
$('.mobile-navbar-button').find('.bar-2').css('display', 'block');
});
});
我希望 .mobile-navbar-button 的宽度和高度反射(reflect)回 90px 的宽度和高度。但目前这不会发生。宽度和高度有点“固定”在 1425px 宽度和 1200px 高度,并且不会回到我在 .closebtn 函数中设置的值。
最佳答案
下面是一段更简单的代码:
$(document).ready(function() {
$(".mobile-navbar-button").on('click touchstart', function() {
$('.mobile-navbar-button').css({
"width": 1425 + "px",
"height": 1200 + "px",
"left": -400 + "px",
"top": -400 + "px",
});
$('.mobile-navbar-button').find('.bar-1, .bar-2').css('display', 'none');
$('.closebtn').css('display', 'block');
});
$(".closebtn").on('click touchstart', function() {
$('.mobile-navbar-button').css({
"width": 90 + "px",
"height": 90 + "px",
"left": 2 + "vw",
"top": 30 + "px",
});
$('.mobile-navbar-button').find('.bar-1, .bar-2').css('display', 'block');
$('.closebtn').css('display', 'none');
});
});
.mobile-navbar-button {
background-color: blue;
width: 90px;
height: 90px;
border-radius: 50%;
position: fixed;
left: 2vw;
top: 30px;
transition: 0.5s;
z-index: 0;
cursor: pointer;
}
.navbar-background {
background-color: rgba(0, 0, 0, 0.9);
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
}
.closebtn {
color: white;
font-size: 100px;
position: fixed;
top: -80px;
left: 35px;
display: none;
transition: 0.8s;
cursor: pointer;
}
.bar-1 {
background-color: white;
width: 54px;
height: 3px;
position: fixed;
top: 65px;
left: 37px;
}
.bar-2 {
background-color: white;
width: 54px;
height: 3px;
position: fixed;
top: 85px;
left: 37px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="navbar-background"></div>
<div class="mobile-navbar-button">
<div class="bar-1">
</div>
<div class="bar-2">
</div>
</div>
<p class="closebtn">×</p>
必须从 .mobile-navbar-button 元素中取出 closebtn 才能使其正常工作,还有它的 click
/touchstart
函数必须修改(CSS display hidden 添加为最后一行)。
它与 click
和 touchstart
事件一起使用,并使用 jQuery CSS 的 object
语法。
在 jQuery CSS 中将单位与数字分开通常是个好主意,因为这样它可以用作数字而不是字符串(1425 是一个int,但 1425px 是一个字符串)。
关于jquery - 有没有更好的方法来执行此 jQuery 代码?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55604348/