未打开Mobile JavaScript下拉菜单

Question

我正在开发一个混合了CSS和JavaScript的移动菜单。我能够让菜单在第一次正确打开，但我不知道如何打开下一层下拉菜单。如果您需要查看菜单的外观，请使用Here it is

这是我的JavaScript

$(document).ready(function () {
    // append plus symbol to every list item that has children
    $('#mobile-nav .parent').append('<span class="open-menu fa fa-angle-down"></span>');

    // fix non-scrolling overflow issue on mobile devices
    $('#mobile-nav > ul').wrap('<div class="overflow"></div>');
    $(window).on('load resize', function () {
        var vph = $(window).height(); // 57px - height of #mobile-nav
        $('.overflow').css('max-height', vph);
    });

    // global variables
    var menu = $('.overflow > ul');
    var bg = $('html, body');

    // toggle background scrolling
    function bgScrolling() {
        // if menu has toggled class... *
        if (menu.hasClass('open')) {
            // * disable background scrolling
            bg.css({
                'overflow-y': 'hidden',
                'height': 'auto'
            });
        // if menu does not have toggled class... *
        } else {
            // * enable background scrolling
            bg.css({
                'overflow-y': 'visible',
                'height': '100%'
            });
        }
    }

    // menu button click events
    $('.menu-button').on('click', function (e) {
        e.preventDefault();
        // activate toggles
        menu.slideToggle(250);
        menu.toggleClass('open');
        bgScrolling();
    });

    // list item click events
    $('.open-menu').on('click', function (e) {
        e.preventDefault();
        $(this).prev('ul').slideToggle(250);
        $(this).toggleClass('rotate');
    });
});

​

这是我的CSS

.logo {
  color:#24678d;
  font-size:2.1rem;
  padding:.65rem 1rem;
  position:absolute;
}

.menu-button {
  color:#24678d;
  cursor:pointer;
  font-size:33px;
  padding: 10px 30px 0px 0px;
  position:fixed;
  right:0;
}

.open-menu {
  color:#24678d;
  cursor:pointer;
  font-size:1rem;
  padding: 0px 0px 0px 0px;
  position:absolute;
  right:20px;
  top:20px;
  transition:transform 250ms ease;
}

/* Generated Overflow Element */
.overflow {
  margin-top:57px;
  overflow-x:hidden;
  overflow-y:auto;
}
/* Menu Styles */
.rotate { transform:rotate(135deg); }

#mobile-nav {
  background-color:#fff;
  position:fixed;
  width:100%;
  z-index:1;
}

#mobile-nav ul {
  background-color:rgba(0,0,0,.1);
  display:none;
  margin:0 1rem;
  padding:0;
  position:relative;
}

#mobile-nav ul:first-child {
  background-color:transparent;
}

#mobile-nav ul li {
  border-top:1px solid rgba(255,255,255,.075);
  list-style:none;
  margin-bottom:0;
  position:relative;
}

#mobile-nav ul li a {
  color:#24678d;
  display:inline-block;
  font-size:1rem;
  padding:1rem 0;
  text-decoration:none;
  width:100%;
}

#mobile-nav ul ul {
  margin:0;
}

#mobile-nav ul ul li {
  border-top:none;
  padding-left:1rem;
}

​

最后，移动菜单的HTML

<div id="mobile-nav"><!--== Starts Mobile Menu ==-->
      <div class="logo"><a href="#"><img class="mobile-img-logo" src="img/mobile-logo.png" alt="Tennessee Interventional and Imaging Associates"></a></div>
        <div class="menu-button">
          <div class="icon">
            <div class="menu-icon menu-icon-3">
              <span class="bar bar-1"></span>
              <span class="bar bar-2"></span>
              <span class="bar bar-3"></span>
            </div>
          </div>
        </div>
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="pay.html">Pay Your Bill</a></li>
          <li class="parent">
              <a href="#">Locations</a>
              <ul>
                  <li><a href="#">Erlanger Health System</a></li>
                  <li><a href="#">Murphy Medical Center</a></li>
                  <li><a href="#">Mountain Lakes Medical Center</a></li>
              </ul>
          </li>
          <li class="parent">
              <a href="#">Services and Procedures</a>
              <ul>
                  <li class="parent">
                      <a href="#">Diagnostic Imaging</a>
                      <ul>
                          <li><a href="#">Responsive</a></li>
                          <li><a href="#">Templates</a></li>
                      </ul>
                  </li>
                  <li class="parent">
                    <a href="#">Interventional Radiology</a>
                        <ul>
                          <li><a href="#">HTML</a></li>
                          <li><a href="#">CSS</a></li>
                          <li><a href="#">jQuery</a></li>
                          <li><a href="#">Ruby on Rails</a></li>
                          <li><a href="#">PHP</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li class="parent">
                <a href="#">About Us</a>
                <ul>
                    <li><a href="#">Meet The Team</a></li>
                </ul>
            </li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div><!--== Ends Mobile Menu ==-->

如果有人能帮我，我将不胜感激。

Answer 1

您的javascript只需在您的菜单ul中添加类open即可。你必须用css来实现这一点。例如：

#mobile-nav ul.open {
    display: block;
}

Answer 2

我想我已经想出了一个解决你的问题的办法。

父功能

我已经创建了一个菜单，里面嵌套了你的子菜单，只有在父菜单被点击后，这些菜单才可见。

为此，我将ul元素上的单击处理程序替换为这个使用.parent类作为目标的简化处理程序

$('.parent').on('click', function(e){
    e.preventDefault();
    // added e.stopPropagation(); to prevent
    // child triggering parents event
    e.stopPropagation();
    $(this).children('ul').slideToggle(250);
});

请注意，在加载文档时，您还必须使用jQuery初始隐藏子菜单，例如：

  $('.parent').children('ul').hide();

子链接功能

为了让嵌套的子链接正常工作，我做了一些调整。首先，在每个a标记上，您需要在之后添加类child__link，此javascript将恢复您的嵌套子链接的预期行为。

 $('.child__link').on('click', function(e){
    // as usual stop the events bubbling up
    e.preventDefault();
    e.stopPropagation();
    // set the location to the intended href attribute
    window.location = $(this).attr('href');
  });

我还必须删除一些幻影CSS和JS，它们应用了我认为您可能已经远离的效果(比如一些ul和li元素上的.rotate类和display:none )。不幸的是，我想不起来是从哪里来的。

我已经把我的答案放到working codepen里了。

仅供参考-我还将您的图标替换为占位符，因为它们缺少链接

祝你好运，我希望这对你有帮助！