堆栈内存溢出
  繁体   English   中英

如何修复此切换 function？

[英]How can I fix this toggle function?

 原文  2021-04-05 18:43:07  2   1    javascript/ html/ css

问题描述

我正在为自己设置一个基本的响应式 web 页面的项目。 我拥有我想要的一切设置方式，但我的 function 在最大宽度小于 480 像素的屏幕上打开和关闭汉堡菜单时遇到问题。 如果我使用菜单 class 将方法 toggleMenu() 从我的 div 中取出，然后取消注释当前已注释掉的 javascript 代码并注释掉当前处于活动状态的代码，那么每次点击时一切都会完美运行。 但是，如果我将代码保持原样并在浏览器中运行，则菜单只会在每次单击时打开，所以第一次单击它时没有任何反应，第二次单击它，菜单打开，第三次我单击它没有任何反应，最后当我第四次单击菜单时再次关闭。 我遇到的另一个问题是目前我必须包含一个外部脚本文件或将一个脚本放在我的 html 文件中，而不是依赖我的 build.js 文件来导入代码。 我的问题是我缺少什么才能让我的菜单正确打开和关闭，同时仍然从我的菜单 class 调用 function 以及如何将其编写为一个模块，我可以从我的 build.js 文件捆绑和运行。 非常感谢您的任何帮助，并在此先感谢您。 我的 HTML 文件：

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <!-- Bring in google fonts -->
       <link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">
       <link href="https://fonts.googleapis.com/css?family=Montserrat+Alternates&display=swap" rel="stylesheet">
  <!-- Bring in bootstrap  -->
       <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
       <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
  <!-- Bring in JSPopper -->
       <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>

     <script src="src/js/index.js" defer></script>
      
  <!-- Bring in my style sheet  -->
       <link rel="stylesheet" href="src/assets/css/basic-style.css">
     <title>Basic Page Setup</title>
</head>
<body>
   <nav class="navbar">

        <div class="logo-container">
              <a href="#">
                   <img src="src/assets/images/seethrough_1.png" alt="seethrough_1" class="logo-image">
                   <span class="logo-text">LOGOHERE</span>
              </a>
       </div>

        <ul class="nav-list" id="navi-list">
             <li class="list-item">
                  <a href="#">About Us</a>
             </li>
             <li class="list-item">
                  <a href="#">Contact</a>
             </li>
             <li class="list-item">
                  <a href="#">Support</a>
             </li>
        </ul>
        <div class="menu" id="toggle-menu" onclick="toggleMenu()">
             <div class="menu-line"></div>
             <div class="menu-line"></div>
             <div class="menu-line"></div>
        </div>
   </nav>
<div class="main-content">
     <p class="my-story">
          Not many have a story like mine. At 2 years old I was diagnosed with leukemia 
          and went into chemotherapy. This brings a great many problems, not least among 
          them a compromised immune system. I caught a cold that turned into pneumonia 
          and I died. It didn’t stick. In that time I saw things that would influence my life 
          profoundly. I can’t explain what happened but when I woke up, the pneumonia was 
          <a href="#about-me" id="about-me"></a>
          gone along with the leukemia. I have also overcome Pancreatic Cancer, Crohn's Disease, 
          and Diabetes just to name a few of the hurdles I found myself lifted over. I give all glory 
          to God, but I tell you these things not to garner sympathy or convince you that my God is 
          real. I tell you this because I believe all these things made me a purposeful person. I got a 
          certification in Computer programming on purpose. I write clean code on purpose. I believe 
          you are reading this on purpose. Let me show you what I can do for you on purpose.
     </p>
</div>

        <div class="footer-container">
             <div class="logo-copyright">
                  <span class="copyright">&copy;</span>
                  <img src="src/assets/images/seethrough_1.png" alt="seethrough_1" class="footer-logo">
                  <span class="footer-text">WebTek</span>
             </div>
            <div class="webmaster-contact">
                 <span class="footer-info">This page created and designed by</span>
                 <a href="mailto: tkremer@nc.rr.com" class="webmaster" id="contact">Thomas E. Kremer</a>
            </div>
        </div>
        
<!--      <script src="dist/build.js" defer></script>
 -->
 <!-- <script src="src/js/index.js" defer></script> -->
</body>
</html>

我的 CSS 文件：

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* Style the logo image and text */
/* .company-logo {
     text-decoration: none;
}
.logo-image {
     width: 75px;
     height: 75px;
}
.logo-text {
     font-family: Montserrat Alternates;
     font-weight: 600;
     font-style: none;
     font-size: 35px;
     color: rgba(0, 0, 0, 1);
     line-height: 32px;
     letter-spacing: 0.03em;
}   */
.logo-image {
  width: 55px;
  height: auto;
}
.logo-text {
  font-family: Montserrat Alternates;
  font-weight: 600;
  font-style: none;
  font-size: 36px;
  line-height: 32px;
  letter-spacing: 0.03em;
}
.navbar a{
  text-decoration: none;
  color: rgba(0, 0, 0, 1);
}
.navbar a:hover {
  color: blue;
}
.navbar {
  align-items: center;
  background-color: #FFFFFF;
  color: rgba(0, 0, 0, 1);
  display: flex;
  font-family: Poppins;
  font-size: 25px;
  justify-content: space-around;
}

.nav-list {
  list-style-type: none;
}

.nav-list .list-item {
  display: inline-block;
  padding: 20px 10px;
}
/* Hide menu on larger screens */
.menu {
  display: none;
}
.menu-line {
  background-color: green;
  width: 25px;
  height: 3px;
  margin-bottom: 4px;
}

/* Style the footer and footer elements */
   .footer-logo {
     margin-top: 0px;
     margin-bottom: 10px;
     width: 55px;
     height: 55px;
}
.copyright {
  font-family: Montserrat Alternates;
  font-weight: 600;
  font-size: 25px;
}
.footer-text {
  margin-top: 25px;
  font-family: Montserrat Alternates;
  font-weight: 600;
  font-style: normal;
  font-size: 21px;
}
.webmaster {
  text-decoration: none;
}
.footer-info {
  font-family: Poppins;
  font-weight: 200;
  font-size: 18px;
  font-style: normal;
  line-height: 32px;
  letter-spacing: 0.03em;
}
.webmaster-contact {
  margin-top: 13px;
}
.footer-container {
     display: flex;
     justify-content: space-evenly;
     position: fixed;
     left: 0;
     bottom: 0;
     width: 100%;
     background-color: #FFFFFF;
     text-align: center;
}

.my-story {
  margin-top: 25px;
  padding: 0 25px 0 25px;
  font-family: Poppins;
  font-weight: 200;
  font-style: normal;
  font-size: 16px;
}

/* Media query for smaller devices, hamburger menu */
@media all and (max-width: 480px) {
  .navbar {
    flex-direction: column;
    position: relative;
  }
  .logo-container {
    width: 100%;
    margin-left: 10px;
    margin-top: 10px;
    margin-bottom: 5px;
  }
/* Show menu */
.menu {
  display: block;
  position: absolute;
  right: 10px;
  top: 10px;
}
.nav-list {
  list-style-type: none;
  width: 100%;
  text-align: center;
  padding: 20px;
  display: none;
  /* padding-left: 0; */
}
.nav-list .list-item {
  display: block;
  border-top: 1px solid black;
  padding: 10px;
}
.footer-container {
  display: flex;
  flex-direction: column;
  justify-content:inherit;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #FFFFFF;
  text-align: center;
}
.copyright {
  font-family: Montserrat Alternates;
  font-weight: 600;
  font-size: 20px;
}
.footer-logo {
  margin-top: 0px;
  margin-bottom: 10px;
  width: 45px;
  height: 45px;
}
.footer-text {
  margin-top: 25px;
  font-family: Montserrat Alternates;
  font-weight: 600;
  font-style: normal;
  font-size: 25px;
}
.logo-copyright {
  display: inline-block;
  margin: 0;
  padding: 0;
}
.webmaster-contact {
  display: inline-block;
  margin: 0;
  padding: 0;
}
.active {
  display: block;
}
.inactive {
  display: none;
}
}

我的 JavaScript 文件：

/* Toggle hamburger menu */
/* const toggleButton = document.getElementById('toggle-menu');
const naviList = document.getElementById('navi-list');
toggleButton.addEventListener('click', () => {
           naviList.classList.toggle('active');
}); */


function toggleMenu() {
     const toggleButton = document.getElementById('toggle-menu');
     const naviList = document.getElementById('navi-list');
     toggleButton.addEventListener('click', () => {
          naviList.classList.toggle('active');
     });
}

所以回顾一下，我试图让汉堡菜单在每次单击时打开和关闭，并从我捆绑的 build.js 文件中运行脚本，而不是从我的 html 文件中或从另一个外部 javascript 文件中运行脚本，无论是作为模块还是作为 ZC0BB2196426032FDADE456 function。 再次感谢大家提前提供帮助。

1 个解决方案

解决方案1
 0 已采纳  2021-04-05 19:46:11

您的 function toggleMenu()在第一次单击时设置了一个事件侦听器，然后第二次单击触发了该侦听器！

您的第一种方法有效（已注释掉）。

使用独立的 JS - 没有“onclick”事件：

// JS EVENT LISTENER METHOD (my preferred method)

const toggleButton = document.getElementById('toggle-menu');
const naviList = document.getElementById('navi-list');

toggleButton.addEventListener('click', () => {
  naviList.classList.toggle('active');
});

// HTML EVENT METHOD

// When you call the named function from HTML `onclick="toggleMenu()"` 
// the event listener is not required. You can just toggle 
// the .active class as usual.

// <div class="menu" id="toggle-menu" onclick="toggleMenu()">

function toggleMenu() {
     const naviList = document.getElementById('navi-list');
     naviList.classList.toggle('active');
}

同时使用这两种方法会相互抵消。 它真的切换了 .active 两次 - 太快了，看不到！

tested with codepen

addEventListener VS onclick 比较

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何使用jQuery切换来修复此脚本？ 不切换时如何修复jQuery的切换function？ 我该如何解决（应该切换为“切换”） 如何切换按钮的onclick =“ function” 我怎样才能做一个切换 function 如何修复此正则表达式函数？ 我该如何修复这个 ejs function 如何修复此javascript函数？ 错误：不是函数。 我该如何解决？ 如何修复“this.reduce() 不是函数”？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM