Question

我跟着这个啧啧：

http://www.falconmasters.com/web-design/menu-desplegable-adaptable-dispositivos-moviles/

在子菜单中添加了一个子菜单，并在我的Jquery中添加了一个event.stopPropagation。

这是我的代码

$(document).ready(main);

var contador = 1;

function main() {
    $('.menu_bar').click(function() {
        if (contador == 1) {
            $('nav').animate({
                left: '0'
            });
            contador = 0;
        } else {
            contador = 1;
            $('nav').animate({
                left: '-100%'
            });
        }
    });

    $('.submenu').click(function(e) {
        e.stopPropagation();
        $(this).children('.children').slideToggle();
    });
}

我的问题是它在小于800px时切换正常，但在第二个子菜单上高于800px它根本没有响应。

希望你能帮助我

这是HTML

<header>
<div class="contentWrapper">

    <div class="menu_bar">
    <a href="#" class="bt-menu"><span class="icon-list2">      </span>Menú</a>
    </div>
    <nav>
        <ul class="level-1">
            <!--Parent #1-->
            <li>
                <a href="#">Home</a>
            </li>

            <!--Parent #2-->
            <li>
                <a href="#">Agenda</a>
            </li>

            <!--Parent #3-->
            <li>
                <a href="#">Nieuws</a>
            </li>

            <!--Parent #4-->
            <li class="submenu">

                <a href="#">Foto's</a>

                <ul class="children">

                    <li>
                        <a href="#">Chaffee</a>
                    </li>

                    <li>
                        <a href="#">Scoutcar</a>
                    </li>

                    <li>
                        <a href="#">Brencarrier</a> 
                    </li>

                    <li>
                        <a href="#">Halftrack</a>   
                    </li>

                    <li>
                        <a href="#">Hummer</a>  
                    </li>

                    <li>
                        <a href="#">Dodge</a>   
                    </li>

                    <li>
                        <a href="#">T34</a> 
                    </li>

                    <li>
                        <a href="#">Mig17</a>   
                    </li>

                    <li>
                        <a href="#">Willeys</a> 
                    </li>

                    <li>
                        <a href="#">Harley</a>  
                    </li>

                    <li>
                        <a href="#">Eng. Bikes</a>  
                    </li>

                    <li>
                        <a href="#">SD-KZF 251</a>  
                    </li>

                    <li>
                        <a href="#">Greyhound</a>   
                    </li>

                    <li>
                        <a href="#">Ferret</a>  
                    </li>

                    <li class="submenu">
                        <a href="#">Museum 40-45</a>
                        <ul class="children">
                            <li><a href="#">Grandchild #1</a></li>
                            <li><a href="#">Grandchild #2</a></li>
                            <li><a href="#">Grandchild #3</a></li>
                            <li><a href="#">Grandchild #4</a></li>
                        </ul>   
                    </li>

                    <li class="submenu">
                        <a href="#">Mariniers</a>
                        <ul class="children">
                            <li><a href="#">Grandchild #1</a></li>
                            <li><a href="#">Grandchild #2</a></li>
                            <li><a href="#">Grandchild #3</a></li>
                            <li><a href="#">Grandchild #4</a></li>

                        </ul>   
                    </li>

                    <li class="submenu">
                        <a href="#">Optochten</a>
                        <ul class="children">
                            <li><a href="#">Grandchild #1</a></li>
                            <li><a href="#">Grandchild #2</a></li>
                            <li><a href="#">Grandchild #3</a></li>
                            <li><a href="#">Grandchild #4</a></li>
                        </ul>   
                    </li>

                </ul>

            </li>

            <!--Parent #5-->
            <li>
                <a href="#">Films/tv</a>
            </li>

            <li>
                <a href="#">Links</a>
            </li>

            <li>
                <a href="#">Gastenboek</a>
            </li>

            <li>
                <a href="#">Contact</a>
            </li>

        </ul>
    </nav>
  </div>
</header>

这是sass。

.menu_bar
  display: none

header
  width: 100%
  nav
    background: #023859
    z-index: 1000
    max-width: 100%
    width: 95%
    margin: 20px auto
    ul
      list-style: none
      li
        display: inline-block
        position: relative
        &:hover
          background: #E6344A
        a
          color: #fff
          display: block
          text-decoration: none
          padding: 10px
          span
            margin-right: 10px
        &:hover .children
          display: block
        .children
          display: none
          background: #011826
          position: absolute
          width: 250%
          z-index: 1000
          padding-left: 0px
          li
            display: block
            overflow: hidden
            border-bottom: 1px solid rgba(255, 255, 255, 0.5)
            a
              display: block
              span
                float: right
                position: relative
                top: 3px
                margin-right: 0
                margin-left: 10px
        .caret
          position: relative
          top: 3px
          margin-left: 10px
          margin-right: 0px

@media screen and (max-width: 800px)
  body
    padding-top: 80px
  .menu_bar
    display: block
    width: 100%
    position: fixed
    top: 0
    background: #E6344A
    .bt-menu
      display: block
      padding: 20px
      color: #fff
      overflow: hidden
      font-size: 25px
      font-weight: bold
      text-decoration: none
    span
      float: right
      font-size: 40px
  header nav
    width: 80%
    height: calc(100% - 80px)
    position: fixed
    right: 100%
    margin: 0
    overflow: scroll
    .level-1
      margin-left: 2px
      padding-left: 0px
    ul li
      display: block
      border-bottom: 1px solid rgba(255, 255, 255, 0.5)
      a
        display: block
      &:hover .children
        display: none
      .children
        width: 100%
        position: relative
        li a
          margin-left: 5px
      .caret
        float: right

Answer 1

（注意我将你的sass转换为css，你可以使用像this one这样的在线转换器将其切换回来）有两个问题：第一个问题是overflow:hidden呼吁：

header nav ul li .children li {
   display: block;
   /*overflow: hidden;*/ //remove
   border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

这阻止了孙子导航显示，因为它被设置为position: absolute因此流出其父节点。一旦你解决了这个问题，就会出现另一个问题，即在点击之前已经显示了孙子subnav。那是因为样式是从父类继承的（两个类名都是.children）。在:hover，您需要将.children的{{1}}设置为ul。（如果您希望它显示在旁边，您也可以添加display: none和left属性：

top

现在孙子菜单将点击

切换

UPDATED FIDDLE

slideToggle在第二个子菜单上

1 个答案: