Question

我有这个“汉堡”导航，在响应768像素后出现 - 它正在工作很好，但应该有一种方法使导航再次（崩溃）后用户单击了菜单下拉列表中的按钮

我被告知添加$（'。responsive-menu'）。toggleClass（'collapse'）...反向 of .toogleClass（'expand'）但它没有上升

应该有办法管理这个，对吧？

用户可以再次单击“汉堡”图标以关闭菜单 - 但是可以使用它按钮点击后自动启动更有意义

这是我的代码 HTML

        <div class="mobile-nav">
            <div class="menu-btn" id="menu-btn">
            <div></div>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="responsive-menu">
            <div class="menu-header">
                <ul id="menu-mobile-menu" class="menu">
                    <li class="burgerfont"><a href="#location">Where are we?</a></li>
                    <li class="burgerfont"><a href="#price">Prices</a></li>
                    <li class="burgerfont"><a href="#job">Apply fo job</a></li>
                    <li class="burgerfont"><a href="#beds">Beds</a></li>
                    <li class="burgerfont"><a href="#about">About us</a></li>
                    <li class="burgerfont"><a href="#contact">Contact us</a></li>
                </ul>
            </div>
        </div>

这是Jquery

jQuery(function ($) {
    $('.menu-btn').click(function () {
        $('.responsive-menu').toggleClass('expand')
    })
})
jQuery(document).ready(function ($) {
    $(".menu-item-has-children").append("<div class='open-menu-link open'>+</div>");
    $('.menu-item-has-children').append("<div class='open-menu-link close'>-</div>");
    $('.open').addClass('visible');
    $('.open-menu-link').click(function (e) {
        var childMenu = e.currentTarget.parentNode.children[1];
        if ($(childMenu).hasClass('visible')) {
            $(childMenu).removeClass("visible");
            $(e.currentTarget.parentNode.children[3]).removeClass("visible");
            $(e.currentTarget.parentNode.children[2]).addClass("visible");
        } else {
            $(childMenu).addClass("visible");
            $(e.currentTarget.parentNode.children[2]).removeClass("visible");
            $(e.currentTarget.parentNode.children[3]).addClass("visible");
        }
    });
});

这是一个单一的寻呼机，所以我使用的是锚点 - 每个链接的单独页面都是可行的重置汉堡

更新 - CSS

.{display:none;}@media (max-width: 768px){.mobile-nav{display:block;z-index:1000;}

.menu-header {display: none;}

{}

  .menu-btn {
    position: absolute;
    display: inline-block;
    right: 20px;
    top: 15px;
    cursor: pointer;
   }

    .menu-btn div {
      position: absolute;
      left: 100%;
      top: 64%;
      padding-right: 8px;
      margin-top: -0.50em;
      line-height: 1.2;
      font-size: 18px;
      font-weight: 200;
      vertical-align: middle;
      z-index: 99;
     }

    .menu-btn span {
      display: block;
      width: 25px;
      height: 4px;
      margin: 4px 0;
      background: #e86411;
      z-index: 99;
     }

  .responsive-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 57px;
    width:50%;
    font-size: 22px;
    border-bottom: #EDEDED solid 1px;
    border-left: #EDEDED solid 1px;
    -webkit-box-shadow: 0px 2px 2px 0px rgba(245,245,245,1);
    -moz-box-shadow: 0px 2px 2px 0px rgba(245,245,245,1);
    box-shadow: 0px 2px 2px 0px rgba(245,245,245,1);
    border-top: #EDEDED solid 1px;
    width: 320px;
    box-sizing: border-box;
    background: #000000;
    list-style:none;
     text-align:center;
       margin-left: auto ;
  margin-right: auto ;
   }

    .responsive-menu .menu-header {display: block;}

      .responsive-menu .menu-header ul {
        background: #fff;
        position: relative;
        display: block;
        list-style:none;
        text-align:center;
          margin-left: auto ;
  margin-right: auto ;
       }

      .responsive-menu .menu-header li {
        background: #fff;
        float: none;
        line-height: 55px;
        width: 110%;
        text-align: center;
        border-bottom: #EDEDED solid 1px;
        position: relative;
        padding: 0;
        color:#e86411!important;
        list-style:none;
          margin-left: auto ;
  margin-right: auto ;
       }

        .responsive-menu .menu-header li:last-child {border-bottom: none;}

  .expand {display: block!important;}

  .responsive-menu .menu-header li .sub-menu {
    display: none;
    font-size: 16px;
    list-style:none;
   }

    .responsive-menu .menu-header li .sub-menu li {
      border-bottom: none;
      line-height: 35px;
      list-style:none;
     }

  .open-menu-link {
    display: none;
    position: absolute;
    right: 15px;
    top: 0;
    line-height: 55px;
    color: #989DA1;
    font-size: 30px;
    cursor: pointer;
   }

  .responsive-menu .menu-header li .visible {display: block;}
@media(max-width: 40em){  .responsive-menu, .responsive-menu .menu-header, .responsive-menu .menu-header .menu{
    width: 100%;
  }
  .responsive-menu .menu-header li{
    text-align: center;
  }

}

.burgerfont { font-family:'proxima_novaregular'; font-size:1.0em; text-transform:uppercase; color:#e86411; text-decoration:none;  }
.burgerfont a { color:#e86411; text-decoration: none;  }
.burgerfont a:hover { color:#f5cb32; text-decoration: none;  }


li.active a {
    color:orange;
}

Answer 1

只需在函数中包含选项.responsive-menu a：

$('.menu-btn, .responsive-menu a').click(function () {
     $('.responsive-menu').toggleClass('expand')
})

选中 DemoFiddle

可以＆＃34;汉堡＆＃34;单击菜单再次导航？

1 个答案: