Question

我正在开发一个混合使用CSS和JavaScript的移动菜单。我能够在第一时间正确打开菜单，但我无法弄清楚如何打开下一层下拉菜单。如果您需要查看菜单的内容，Here it is

这是我的JavaScript

＆＃13;

.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;
}

＆＃13;

这是我的CSS

＆＃13;

<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 ==-->

＆＃13;

最后，移动菜单的HTML

{{1}}

如果有人可以帮助我，我会非常感激。

Answer 1

您的javascript只是将课程open添加到您的菜单ul。你必须用css实现这意味着什么。例如：

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

Answer 2

我想到了你的问题的解决方案。

家长功能

我已经能够创建一个嵌套子菜单的菜单，这些菜单在单击父菜单之前是不可见的。

我通过使用.parent类作为目标

替换ul元素上的click处理程序来实现此目的

$('.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，它们正在应用我认为可能已经离开的效果（例如某些.rotate上的display:none类和ul以及li元素）。不幸的是，我无法从中确切地回忆起。

我已将答案放入working codepen。

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

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

移动JavaScript下拉菜单无法打开

2 个答案: