在打开侧抽屉窗口时跳到 html css 中的高度为零答案

【问题标题】：on opening side drawer window skips to height zero in html css在打开侧抽屉窗口时跳到 html css 中的高度为零
【发布时间】：2019-11-11 22:53:04
【问题描述】：

我使用 HTML CSS、引导程序和一点点 JavaScript 制作了一个侧边抽屉。我也修复了导航栏。但问题是当触发侧抽屉时，我的窗口跳到零高度。我试图找到解决方案，但没有成功。

这些是我的代码。

$(".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="#" 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>

【问题讨论】：

使用preventDefault，或者干脆用href="javascript:void(0)"代替href="#"
$(".icon-box") 也应该是 $(".icon-box a")，因为您的点击会触发链接而不是 li
我尝试了第一个javascript:void(0)。这很有效，谢谢@LawrenceCherone

标签： javascript jquery html css sass

【解决方案1】：

$(".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>

这样做... :)

它会为你工作，谢谢...？

【讨论】：