响应式移动设备菜单不会在点击时隐藏

【问题标题】：Responsive mobile device menu will not hide on click响应式移动设备菜单不会在点击时隐藏
【发布时间】：2021-02-26 00:21:03
【问题描述】：

我有一个基于 Webdevkit 响应式菜单的菜单。 菜单由 Jquery 控制，我正在尝试修改代码，以便在第一次单击汉堡包图标时在移动菜单上更改为“X”， 然后当点击移动菜单上的一个项目时，菜单被隐藏并且“X”变回汉堡符号，并且当点击汉堡符号时重复该过程。

我已经阅读了几篇关于此的文章，并认为我需要向 HREF 添加一个类，我已经这样做了，但未能制定出正确的 (jquery) 语句来实现上述目标。

/** code by webdevtrick ( https://webdevtrick.com ) **/
(function($) { 
  $(function() { 
    $('nav ul li a:not(:only-child)').click(function(e) {
      $(this).siblings('.nav-dropdown').toggle();
      $('.nav-dropdown').not($(this).siblings()).hide();
      e.stopPropagation();
    });
    $('html').click(function() {
      $('.nav-dropdown').hide();
    });
    
    /* create mobile dropdown menu */
     $('#nav-toggle').click(function() {
      $('nav ul').slideToggle();
    });  
    
  
    $('a.mmenu').click(function() {
        $('#nav-toggle').toggleClass('active');
        $('.nav-mobile').toggleClass('hide'); 
    });
     
   $('#nav-toggle').on('click', function() {
      this.classList.toggle('active');
    }); 
    
  }); 
})(jQuery);
 <style type="text/css">
    body {
    margin: 0;
    padding: 0;
    }
   {
     font-family: 'Righteous', cursive;  
    }
    .nav-bar {
      height: 70px;
       background: #262626;
    }
 
     .brand {
 
      display: none;
    }
.brand a img {
    max-height: 70px;
}
.brand a,
.brand a:visited {
  color: #ffffff;
  text-decoration: none;
}
 
.nav-container {
  max-width: 1000px;
  margin: 0 auto;
}
 
 /* position navbar items */
nav {
  
  float: center ;
}
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
nav ul li {
  float: left;
  position: relative;
}
nav ul li a,
nav ul li a:visited {
  display: block;
  padding: 0 20px;
  line-height: 70px;
  background: #262626;
  color: #ffffff;
  text-decoration: none;
}
nav ul li a:hover,
nav ul li a:visited:hover {
  background: #2ab1ce;
  color: #ffffff;
}
nav ul li a:not(:only-child):after,
nav ul li a:visited:not(:only-child):after {
  padding-left: 4px;
  content: ' ▾';
}
nav ul li ul li {
  min-width: 190px;
}
nav ul li ul li a {
  padding: 15px;
  line-height: 20px;
}
 
.nav-dropdown {
  position: absolute;
  display: none;
  z-index: 1;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}
.nav-mobile {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  background: #262626;
  height: 70px;
  width: 70px;
}
 
@media only screen and (max-width: 798px) {
  .nav-mobile {
    display: block;
  }
 
  nav {
    width: 100%;
    padding: 70px 0 15px;
  }
  nav ul {
    display: none;
  }
  nav ul li {
    float: none;
  }
  nav ul li a {
    padding: 15px;
    line-height: 20px;
    padding-left: 25%;
     
  }
  nav ul li ul li a {
    padding-left: 30%;
  }
 
  .nav-dropdown {
    position: static;
  }
  .brand {
       position: absolute;
        padding-left: 20px;
       float: left;
       line-height: 70px;
       text-transform: uppercase;
        font-size: 1.4em; 
      display: block;
  }
    .brand a img {
        max-height: 60px;
        margin-top: 5px;
        display: block;
        
    }
}
@media screen and (min-width: 799px) {
  .nav-list {
    display: block !important;
  }
}
#nav-toggle {
  position: absolute;
  left: 18px;
  top: 22px;
  cursor: pointer;
  padding: 10px 35px 16px 0px;
}
#nav-toggle span,
#nav-toggle span:before,
#nav-toggle span:after {
  cursor: pointer;
  border-radius: 1px;
  height: 5px;
  width: 35px;
  background: #ffffff;
  position: absolute;
  display: block;
  content: '';
  transition: all 300ms ease-in-out;
}
#nav-toggle span:before {
  top: -10px;
}
#nav-toggle span:after {
  bottom: -10px;
}
#nav-toggle.active span {
  background-color: transparent;
}
#nav-toggle.active span:before, #nav-toggle.active span:after {
  top: 0;
}
#nav-toggle.active span:before {
  transform: rotate(45deg);  
}
#nav-toggle.active span:after {
   transform: rotate(-45deg); 
  
 
}
<html>
 
<head>
  <meta charset="UTF-8">
  <title>Responsive Dropdown nav-bar Bar</title>
 <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link href="https://fonts.googleapis.com/css?family=Righteous&display=swap" rel="stylesheet">  
      <link rel="stylesheet" href="media/idea3.css">
</head>
 
<body>
 
  <section class="nav-bar">
  <div class="nav-container">
    <div class="brand">
      <a href="">MENU</a>
    </div>
    <nav>
      <div class="nav-mobile"><a id="nav-toggle" href="#!"><span></span></a></div>
      <ul class="nav-list">
        <li>
          <a class="mmenu" href="#">Home</a>
        </li>
        <li>
          <a class="mmenu" href="#">News</a>
        </li>
        <li>
          <a class="mmenu" href="#">Projects</a>
          <ul class="nav-dropdown">
            <li>
              <a class="mmenu" href="#">Project 1</a>
            </li>
            <li>
              <a class="mmenu" href="#">Project 2</a>
            </li>
            <li>
              <a class="mmenu" href="#">Project3</a>
            </li>
          </ul>
        </li>
        <li>
        <li>
          <a clas="mmenu" href="#">About</a>
        </li>
      </ul>
    </nav>
  </div>
</section>
 
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script  src="media/idea4.js"></script>
</body>
 
</html>

任何关于前进道路的帮助或想法将不胜感激。

<style type="text/css">
    body {
    margin: 0;
    padding: 0;
    }
   {
     font-family: 'Righteous', cursive;  
    }
    .nav-bar {
      height: 70px;
       background: #262626;
    }
 
     .brand {
 
      display: none;
    }
.brand a img {
    max-height: 70px;
}
.brand a,
.brand a:visited {
  color: #ffffff;
  text-decoration: none;
}
 
.nav-container {
  max-width: 1000px;
  margin: 0 auto;
}
 
 /* position navbar items */
nav {
  
  float: center ;
}
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
nav ul li {
  float: left;
  position: relative;
}
nav ul li a,
nav ul li a:visited {
  display: block;
  padding: 0 20px;
  line-height: 70px;
  background: #262626;
  color: #ffffff;
  text-decoration: none;
}
nav ul li a:hover,
nav ul li a:visited:hover {
  background: #2ab1ce;
  color: #ffffff;
}
nav ul li a:not(:only-child):after,
nav ul li a:visited:not(:only-child):after {
  padding-left: 4px;
  content: ' ▾';
}
nav ul li ul li {
  min-width: 190px;
}
nav ul li ul li a {
  padding: 15px;
  line-height: 20px;
}
 
.nav-dropdown {
  position: absolute;
  display: none;
  z-index: 1;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}
.nav-mobile {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  background: #262626;
  height: 70px;
  width: 70px;
}
 
@media only screen and (max-width: 798px) {
  .nav-mobile {
    display: block;
  }
 
  nav {
    width: 100%;
    padding: 70px 0 15px;
  }
  nav ul {
    display: none;
  }
  nav ul li {
    float: none;
  }
  nav ul li a {
    padding: 15px;
    line-height: 20px;
    padding-left: 25%;
     
  }
  nav ul li ul li a {
    padding-left: 30%;
  }
 
  .nav-dropdown {
    position: static;
  }
  .brand {
       position: absolute;
        padding-left: 20px;
       float: left;
       line-height: 70px;
       text-transform: uppercase;
        font-size: 1.4em; 
      display: block;
  }
    .brand a img {
        max-height: 60px;
        margin-top: 5px;
        display: block;
        
    }
}
@media screen and (min-width: 799px) {
  .nav-list {
    display: block !important;
  }
}
#nav-toggle {
  position: absolute;
  left: 18px;
  top: 22px;
  cursor: pointer;
  padding: 10px 35px 16px 0px;
}
#nav-toggle span,
#nav-toggle span:before,
#nav-toggle span:after {
  cursor: pointer;
  border-radius: 1px;
  height: 5px;
  width: 35px;
  background: #ffffff;
  position: absolute;
  display: block;
  content: '';
  transition: all 300ms ease-in-out;
}
#nav-toggle span:before {
  top: -10px;
}
#nav-toggle span:after {
  bottom: -10px;
}
#nav-toggle.active span {
  background-color: transparent;
}
#nav-toggle.active span:before, #nav-toggle.active span:after {
  top: 0;
}
#nav-toggle.active span:before {
  transform: rotate(45deg);  
}
#nav-toggle.active span:after {
   transform: rotate(-45deg); 
  
 
}
<html>
 
<head>
  <meta charset="UTF-8">
  <title>Responsive Dropdown nav-bar Bar</title>
 <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link href="https://fonts.googleapis.com/css?family=Righteous&display=swap" rel="stylesheet">  
      <link rel="stylesheet" href="media/idea3.css">
</head>
 
<body>
 
  <section class="nav-bar">
  <div class="nav-container">
    <div class="brand">
      <a href="">MENU</a>
    </div>
    <nav>
      <div class="nav-mobile"><a id="nav-toggle" href="#!"><span></span></a></div>
      <ul class="nav-list">
        <li>
          <a class="mmenu" href="#">Home</a>
        </li>
        <li>
          <a class="mmenu" href="#">News</a>
        </li>
        <li>
          <a class="mmenu" href="#">Projects</a>
          <ul class="nav-dropdown">
            <li>
              <a class="mmenu" href="#">Project 1</a>
            </li>
            <li>
              <a class="mmenu" href="#">Project 2</a>
            </li>
            <li>
              <a class="mmenu" href="#">Project3</a>
            </li>
          </ul>
        </li>
        <li>
        <li>
          <a clas="mmenu" href="#">About</a>
        </li>
      </ul>
    </nav>
  </div>
</section>
 
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script  src="media/idea4.js"></script>
</body>
 
</html>
/** code by webdevtrick ( https://webdevtrick.com ) **/
(function($) { 
  $(function() { 
    $('nav ul li a:not(:only-child)').click(function(e) {
      $(this).siblings('.nav-dropdown').toggle();
      $('.nav-dropdown').not($(this).siblings()).hide();
      e.stopPropagation();
    });
    $('html').click(function() {
      $('.nav-dropdown').hide();
    });
    
    /* create mobile dropdown menu */
     $('#nav-toggle').click(function() {
      $('nav ul').slideToggle();
    });  
    
  
    $('a.mmenu').click(function() {
        $('#nav-toggle').toggleClass('active');
        $('.nav-mobile').toggleClass('hide'); 
    });
     
   $('#nav-toggle').on('click', function() {
      this.classList.toggle('active');
    }); 
    
  }); 
})(jQuery);

【问题讨论】：

    标签： html jquery css


    【解决方案1】：

    我删除了点击元素的祖父母，因为它已经改变了点击时的汉堡包

    $('a.mmenu').click(function() {
        $('#nav-toggle').toggleClass('active');
       $(this).parent().parent().hide()


    /** code by webdevtrick ( https://webdevtrick.com ) **/
(function($) { 
  $(function() { 
    $('nav ul li a:not(:only-child)').click(function(e) {
      $(this).siblings('.nav-dropdown').toggle();
      $('.nav-dropdown').not($(this).siblings()).hide();
      e.stopPropagation();
    });
    $('html').click(function() {
      $('.nav-dropdown').hide();
    });
    
    /* create mobile dropdown menu */
     $('#nav-toggle').click(function() {
      $('nav ul').slideToggle();
    });  
    
  
    $('a.mmenu').click(function() {
        $('#nav-toggle').toggleClass('active');
/* edited here*/
       $(this).parent().parent().hide()
       
        
    });
     
   $('#nav-toggle').on('click', function() {
      this.classList.toggle('active');
    }); 
    
  }); 
})(jQuery);
      body {
    margin: 0;
    padding: 0;
    }
   {
     font-family: 'Righteous', cursive;  
    }
    .nav-bar {
      height: 70px;
       background: #262626;
    }
 
     .brand {
 
      display: none;
    }
.brand a img {
    max-height: 70px;
}
.brand a,
.brand a:visited {
  color: #ffffff;
  text-decoration: none;
}
 
.nav-container {
  max-width: 1000px;
  margin: 0 auto;
}
 
 /* position navbar items */
nav {
  
  float: center ;
}
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
nav ul li {
  float: left;
  position: relative;
}
nav ul li a,
nav ul li a:visited {
  display: block;
  padding: 0 20px;
  line-height: 70px;
  background: #262626;
  color: #ffffff;
  text-decoration: none;
}
nav ul li a:hover,
nav ul li a:visited:hover {
  background: #2ab1ce;
  color: #ffffff;
}
nav ul li a:not(:only-child):after,
nav ul li a:visited:not(:only-child):after {
  padding-left: 4px;
  content: ' ▾';
}
nav ul li ul li {
  min-width: 190px;
}
nav ul li ul li a {
  padding: 15px;
  line-height: 20px;
}
 
.nav-dropdown {
  position: absolute;
  display: none;
  z-index: 1;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}
.nav-mobile {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  background: #262626;
  height: 70px;
  width: 70px;
}
 
@media only screen and (max-width: 798px) {
  .nav-mobile {
    display: block;
  }
 
  nav {
    width: 100%;
    padding: 70px 0 15px;
  }
  nav ul {
    display: none;
  }
  nav ul li {
    float: none;
  }
  nav ul li a {
    padding: 15px;
    line-height: 20px;
    padding-left: 25%;
     
  }
  nav ul li ul li a {
    padding-left: 30%;
  }
 
  .nav-dropdown {
    position: static;
  }
  .brand {
       position: absolute;
        padding-left: 20px;
       float: left;
       line-height: 70px;
       text-transform: uppercase;
        font-size: 1.4em; 
      display: block;
  }
    .brand a img {
        max-height: 60px;
        margin-top: 5px;
        display: block;
        
    }
}
@media screen and (min-width: 799px) {
  .nav-list {
    display: block !important;
  }
}
#nav-toggle {
  position: absolute;
  left: 18px;
  top: 22px;
  cursor: pointer;
  padding: 10px 35px 16px 0px;
}
#nav-toggle span,
#nav-toggle span:before,
#nav-toggle span:after {
  cursor: pointer;
  border-radius: 1px;
  height: 5px;
  width: 35px;
  background: #ffffff;
  position: absolute;
  display: block;
  content: '';
  transition: all 300ms ease-in-out;
}
#nav-toggle span:before {
  top: -10px;
}
#nav-toggle span:after {
  bottom: -10px;
}
#nav-toggle.active span {
  background-color: transparent;
}
#nav-toggle.active span:before, #nav-toggle.active span:after {
  top: 0;
}
#nav-toggle.active span:before {
  transform: rotate(45deg);  
}
#nav-toggle.active span:after {
   transform: rotate(-45deg); 
  
 
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<html>
 
<head>
  <meta charset="UTF-8">
  <title>Responsive Dropdown nav-bar Bar</title>
 <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link href="https://fonts.googleapis.com/css?family=Righteous&display=swap" rel="stylesheet">  
      <link rel="stylesheet" href="media/idea3.css">
</head>
 
<body>
 
  <section class="nav-bar">
  <div class="nav-container">
    <div class="brand">
      <a href="">MENU</a>
    </div>
    <nav>
      <div class="nav-mobile"><a id="nav-toggle" href="#!"><span></span></a></div>
      <ul class="nav-list">
        <li>
          <a class="mmenu" href="#">Home</a>
        </li>
        <li>
          <a class="mmenu" href="#">News</a>
        </li>
        <li>
          <a class="mmenu" href="#">Projects</a>
          <ul class="nav-dropdown">
            <li>
              <a class="mmenu" href="#">Project 1</a>
            </li>
            <li>
              <a class="mmenu" href="#">Project 2</a>
            </li>
            <li>
              <a class="mmenu" href="#">Project3</a>
            </li>
          </ul>
        </li>
        <li>
        <li>
          <a clas="mmenu" href="#">About</a>
        </li>
      </ul>
    </nav>
  </div>
</section>
 
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script  src="media/idea4.js"></script>
</body>
 
</html>

    【讨论】：

    • 这适用于主要项目，但子菜单项目现在不显示。有什么办法可以显示这些，一旦选择菜单就会恢复到汉堡包。
    • 通过从下拉菜单“项目”中删除“菜单”，下拉菜单起作用。它在关闭时打开，但主菜单仍然可见。希望有解决办法。
    【解决方案2】：

    通过将 HTML 中下拉菜单上的 HREF 更改为 diitem。

    在下面添加到 Jquery

    $('a.ditem').click(function() {
    $('#nav-toggle').toggleClass('active'); 
      $('nav ul').hide();

    菜单现在可以正常工作

    【讨论】：

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2022-11-03
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode