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

Posted 2023-05-08

【中文标题】如何折叠一页布局上的菜单？

【英文标题】：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 spanmargin: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。

【参考方案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