Javascript 在html css中,打开侧抽屉窗口跳至零高度
我用HTML CSS、引导和一点javascript制作了一个侧抽屉。我还修好了导航栏。但问题是,当触发侧抽屉我的窗户跳到零高度。我试图找到一个解决办法,但没有成功 这是我的密码 $.icon-box.clickfunction{ $sideToggleBtn.toggleClassfa-bar fa次; $.sidenav.toggleClasssidenav-open; $.sidenav.css 宽度 $.sidenav.hasClasssidenav-open?450px:0px ; }; .侧导航{ 身高:100%; 宽度:0; 位置:固定; z指数:1000; 排名:0; 右:0; 背景颜色:$nav颜色; 溢出x:隐藏; 过渡:0.5s; 填充顶部:60px; .关闭{ 位置:绝对位置; 排名:0; 右:25px; 字体大小:36px; 左边距:50像素; } } .侧导航打开{ 宽度:450px; } .侧导航关闭{ 宽度:0px; } 你好,世界 你喜欢这样吗 它将为您工作,谢谢…?使用,或者简单地使用href=javascript:void0而不是href=allow$。图标框应为$。图标框a是您的单击触发的链接,而不是lii尝试的第一个javascript:void0。谢谢你,劳伦斯·切隆Javascript 在html css中,打开侧抽屉窗口跳至零高度,javascript,jquery,html,css,sass,Javascript,Jquery,Html,Css,Sass,我用HTML CSS、引导和一点javascript制作了一个侧抽屉。我还修好了导航栏。但问题是,当触发侧抽屉我的窗户跳到零高度。我试图找到一个解决办法,但没有成功 这是我的密码 $.icon-box.clickfunction{ $sideToggleBtn.toggleClassfa-bar fa次; $.sidenav.toggleClasssidenav-open; $.sidenav.css 宽度 $.sidenav.hasClasssidenav-open?450px:0px ;
$(".icon-box").click(function() {
$("#sideToggleBtn").toggleClass("fa-bars fa-times");
$(".sidenav").toggleClass("sidenav-open");
$(".sidenav").css(
"width",
$(".sidenav").hasClass("sidenav-open") ? "450px" : "0px"
);
});
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1000;
top: 0;
right: 0;
background-color: $nav-Color;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
.closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
}
.sideNav-open{
width: 450px;
}
.sideNav-close{
width: 0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-white">
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav ml-auto">
<li class="nav-item hide-on-mb icon-box">
<a href="href="javascript:void(0)" class="nav-link closebtn ">
<i id="sideToggleBtn" class="fas fa-bars">Menu</i>
</a>
</li>
</ul>
</div>
</nav>
<div id="mysidenav" class="sidenav">
<div class="container">
<div class="brand-wrapper">
<h1 class="brand-title">
HEllo world
</h1>
</div>
</div>
</div>