如何折叠一页布局上的菜单？答案

【问题标题】：How do I collapse a menu on a one-page layout?如何折叠一页布局上的菜单？
【发布时间】：2021-01-10 03:09:26
【问题描述】：

我从另一个开发人员那里接手了一个项目，我正在努力清理和改进。拥有该网站的公司想要一个单页布局，所以我开始构建它，但我在响应式导航栏上遇到了问题，它带有一个下拉菜单。我的问题是，当我按下下拉部分中的一个链接时，它会将我带到页面的正确部分，但是如果我想在之后转到其他链接之一，我必须刷新页面，因为当我将鼠标悬停在列表项上时，不会出现下拉菜单。

我知道这听起来令人困惑，但让我向您展示我正在制作的测试页面，也许它会更清楚（对不起，它不是英文的） http://www.handig.dk/test/index.html

当您在页面上时，将鼠标悬停在名为“Menukort”的项目上。您注意到下拉菜单出现对了吗？尝试单击其中一个链接。完成此操作后，再次尝试将鼠标悬停在“Menukort”上。您是否注意到下拉菜单不再出现？此外，如果您单击“Menukort”，您将返回页面顶部，这也是我不想要的。

您对如何解决此问题有任何建议吗？

这是导航栏的代码。

HTML

    <section class="navigation">
  <div class="nav-container" id="myHeader">
    <nav>
      <div class="nav-mobile"><a id="nav-toggle" href="#!"><span></span></a></div>
      <ul class="nav-list">
        <li><a href="#">Forside</a></li>
        <li><a href="#om_os">Om os</a></li>
        <li> <a href="#">Menukort</a>
          <ul class="nav-dropdown">
            <li><a href="#frokost">Frokost</a></li>
            <li><a href="#aften">Aften</a></li>
            <li><a href="#drikke">Drikkevarer</a></li>
          </ul>
        </li>
        <li><a href="https://book.dinnerbooking.com/dk/da-DK/book/table/pax/1620/3">Bordbestilling</a></li>
        <li> <a href="#ud_af_huset">Mad ud af huset</a>
          <ul class="nav-dropdown">
            <li><a href="#take_away">Take Away</a></li>
            <li><a href="#festbuffet">Festbuffet</a></li>
            <li><a href="#brunch">Brunch</a></li>
            <li><a href="#reception">Receptionsmad</a></li>
          </ul>
        </li>
        <li><a href="#selskaber">Selskaber</a></li>
        <li><a href="#hotellet">Hotellet</a></li>
        <li><a href="#find">Find os</a></li>
      </ul>
    </nav>
  </div>
</section>

CSS

    .nav-container {
  display: flex;
  justify-content: center;
  max-width: 100%;
  margin: 0 auto;
  background-color: #f1f1f1;
}
.navigation {
  display: flex;
  justify-content: center;
  height: 70px;
  background-color: #f1f1f1;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: #f1f1f1;
}
nav ul li {
  float: left;
  position: relative;
  background-color: #f1f1f1;
}
nav ul li a,
nav ul li a:visited {
  display: block;
  padding: 0 20px;
  line-height: 70px;
  color: #333;
  text-decoration: none;
  background-color: #f1f1f1;
}
nav ul li a:hover,
nav ul li a:visited:hover {
  color: #84a0a8;
}
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);
  background-color: #f1f1f1;
}
nav ul li:hover .nav-dropdown {
    display: block;
}
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,.2);
}

.sticky + .nav-container {
  padding-top: 102px;
}

/* Mobile navigation */
.nav-mobile {
  display: none;
  height: 35px;/* ???? */
  /*width: 25px;*/
}

@media only screen and (max-width: 798px) {
  .nav-mobile {
    display: block;
    position:relative;
  }
  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;
  }
  nav ul li ul li a {
    padding-left: 30px;
  }

  .nav-dropdown {
    position: static;
  }
}
@media screen and (min-width: 799px) {
  .nav-list {
    display: block !important;
  }
}
 #nav-toggle{
    position:relative;
    padding:10px 35px 16px;
    display:table;
    margin:-35px auto 0;
  }
#nav-toggle span{margin:auto;left:0;right:0;}
#nav-toggle span,
#nav-toggle span:before,
#nav-toggle span:after {
  cursor: pointer;
  border-radius: 1px;
  height: 5px;
  width: 35px;
  background: #333;
  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);
}

JavaScript（由于某种原因，slideUp 功能也不起作用。单击移动菜单中的链接后，我无法关闭菜单）

(function($) { // Begin jQuery
  $(function() { // DOM ready
    // If a link has a dropdown, add sub menu toggle.
    $('nav ul li a:not(:only-child)').click(function(e) {
      $(this).siblings('.nav-dropdown').toggle();
      // Close one dropdown when selecting another
      $('.nav-dropdown').not($(this).siblings()).hide();
      e.stopPropagation();
    });
    // Clicking away from dropdown will remove the dropdown class
    $('html').click(function() {
      $('.nav-dropdown').hide();
    });
    // Toggle open and close nav styles on click
    $('#nav-toggle').click(function() {
      $('nav ul').slideToggle();
    });
    // Hamburger to X toggle
    $('#nav-toggle').on('click', function() {
      this.classList.toggle('active');
    });
    $('.nav-dropdown li a').on("click", function(){
    $('#nav-toggle').slideUp();
});
  }); // end DOM ready
})(jQuery); // end jQuery

【问题讨论】：

我不得不想象整个文档的点击处理程序 (html) 是问题所在。我会将它的下拉部分转换为 CSS。

标签： javascript html jquery css responsive-design

【解决方案1】：

问题来了：

$('html').click(function() {
  $('.nav-dropdown').hide();
});

当你把 .hide 让 css 隐藏元素并且你看不到它替换它。

【讨论】：

【解决方案2】：

我添加了一个悬停功能来切换菜单，就像点击一样。现在，css 提供了该规则，但在关闭它后被 JQuery 覆盖。使用 javascript:void(0) 而不是 # 以避免锚定到页面顶部。

笔： https://codepen.io/richiegarcia/pen/oNxmXGK


    (function($) { // Begin jQuery
      $(function() { // DOM ready
        //Hover shows submenu
        $('nav ul li a:not(:only-child)').hover(function(e) {
          $(this).children('.nav-dropdown').toggle();
          // Close one dropdown when selecting another
        });
        
        // If a link has a dropdown, add sub menu toggle.
        $('nav ul li a:not(:only-child)').click(function(e) {
          $(this).siblings('.nav-dropdown').toggle();
          // Close one dropdown when selecting another
          $('.nav-dropdown').not($(this).siblings()).hide();
          e.stopPropagation();
        });
        // Clicking away from dropdown will remove the dropdown class
        $('html').click(function() {
          $('.nav-dropdown').hide();
        });
        // Toggle open and close nav styles on click
        $('#nav-toggle').click(function() {
          $('nav ul').slideToggle();
        });
        // Hamburger to X toggle
        $('#nav-toggle').on('click', function() {
          this.classList.toggle('active');
        });
        $('.nav-dropdown li a').on("click", function(){
        $('#nav-toggle').slideUp();
    });
      }); // end DOM ready
    })(jQuery); // end jQuery

【讨论】：