堆栈内存溢出
  简体   繁体   English

如何修复此切换 function？

[英]How can I fix this toggle function?

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

问题描述

I am working an a project for setting up a basic responsive web page for myself.我正在为自己设置一个基本的响应式 web 页面的项目。 I have everything the way that I want it for my set up but I am having problems with my function to open and close the hamburger menu on screens with a max-width of less than 480px.我拥有我想要的一切设置方式，但我的 function 在最大宽度小于 480 像素的屏幕上打开和关闭汉堡菜单时遇到问题。 If I take the method toggleMenu() off of my div with a menu class and I uncomment out the javascript code that is currently commented out and comment out the code that is currently active, everything works perfect on every click.如果我使用菜单 class 将方法 toggleMenu() 从我的 div 中取出，然后取消注释当前已注释掉的 javascript 代码并注释掉当前处于活动状态的代码，那么每次点击时一切都会完美运行。 However if I leave the code as is and run it in the browser the menu only toggles open on every other click, so the first time I click it nothing happens, the second time I click it, the menu opens up, the third time I click it nothing happens and finally when I click the fourth time the menu closes back up again.但是，如果我将代码保持原样并在浏览器中运行，则菜单只会在每次单击时打开，所以第一次单击它时没有任何反应，第二次单击它，菜单打开，第三次我单击它没有任何反应，最后当我第四次单击菜单时再次关闭。 The other issue that I am having is currently I have to include an external script file or put a script inside of my html file rather than relying on my build.js file to import the code.我遇到的另一个问题是目前我必须包含一个外部脚本文件或将一个脚本放在我的 html 文件中，而不是依赖我的 build.js 文件来导入代码。 My question is what am I missing to get my menu to open and close correctly while still calling a function from my menu class and how would I write this as a module that I can bundle and run from my build.js file.我的问题是我缺少什么才能让我的菜单正确打开和关闭，同时仍然从我的菜单 class 调用 function 以及如何将其编写为一个模块，我可以从我的 build.js 文件捆绑和运行。 Any help is greatly appreciated and thank you in advance.非常感谢您的任何帮助，并在此先感谢您。 My HTML File:我的 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>

My CSS File:我的 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;
}
}

My JavaScript File:我的 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');
     });
}

So recap, I am trying to have the hamburger menu open and close with each click and run the script from my bundled build.js file rather than from within my html file or from another external javascript file, either as a module or as an onclick function.所以回顾一下，我试图让汉堡菜单在每次单击时打开和关闭，并从我捆绑的 build.js 文件中运行脚本，而不是从我的 html 文件中或从另一个外部 javascript 文件中运行脚本，无论是作为模块还是作为 ZC0BB2196426032FDADE456 function。 Thank you all again for the help in advance.再次感谢大家提前提供帮助。

1 个解决方案

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

Your function toggleMenu() is setting an event listener on the first click, then the second click is triggering that listener!您的 function toggleMenu()在第一次单击时设置了一个事件侦听器，然后第二次单击触发了该侦听器！

Your first method works (commented out).您的第一种方法有效（已注释掉）。

Use standalone JS - with no 'onclick' event:使用独立的 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');
}

Using both methods together will cancel each other out.同时使用这两种方法会相互抵消。 It's really toggling .active twice - too fast to see!它真的切换了 .active 两次 - 太快了，看不到！

tested with codepen

addEventListener VS onclick comparison addEventListener VS onclick 比较

暂无
暂无

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

相关问题 如何使用jQuery切换来修复此脚本？ - How can I fix this script with jQuery toggle? 不切换时如何修复jQuery的切换function？ - How do I fix jQuery's toggle function when not toggling? 我该如何解决（应该切换为“切换”） - How do I fix this (it is supposed to toggle 'toggle') 如何切换按钮的onclick =“ function” - How can I toggle a onclick=“function” for a button 我怎样才能做一个切换 function - How can i make a toggle function 如何修复此正则表达式函数？ - how can I fix this regular expression function? 我该如何修复这个 ejs function - How can I fix this ejs function 如何修复此javascript函数？ - How can I fix this javascript function? 错误：不是函数。 我该如何解决？ - Error : is not a function. How can I fix it? 如何修复“this.reduce() 不是函数”？ - How can I fix 'this.reduce() is not a function'?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM