javascript - 使用 jQuery 菜单播放 "peek-a-boo"

Question

所以我正在研究这个菜单，我试图在点击时扩展/收缩。在与 javascript 战斗了 2 周(在我的业余时间)之后，我决定尝试使用 jQuery 来解决这个问题。容易多了!嗯，有点。我设法打开 4 级菜单的第二级，但是当我尝试打开第三级时，它滑入 View ，然后立即再次滑出。就像它在和我玩“躲猫猫”一样。

代码逻辑在第二层工作，所以理论上它应该适用于所有级别，对吗？如何调整此代码以使我的切换功能正常工作？

HTML

<ul id="main-menu">
        <li class="main-tabs"><span>Home</span>
            <ul id="sub-menu">
                <li class="sub-tabs"><span>Sub-Menu Tabs</span>
                    <ul id="drop-menu">
                        <li class="drop-tabs"><span>Drop Menu Tabs</span>
                            <ul id="slide-menu">
                                <li class="slide-tabs"><span>Slide Menu Tabs</span></li>
                                <li class="slide-tabs"><span>Slide Menu Tabs</span></li>
                                <li class="slide-tabs"><span>Slide Menu Tabs</span></li>
                                <li class="slide-tabs"><span>Slide Menu Tabs</span></li>
                                <li class="slide-tabs"><span>Slide Menu Tabs</span></li>
                            </ul> <!-- End Slide Menu -->
                        </li> <!-- End Drop Tab -->
                    </ul> <!-- End Drop Menu -->
                </li> <!-- End Sub Tabs -->
            </ul> <!-- End Sub Menu -->
        </li> <!-- End Main Tabs -->
    </ul> <!-- End Main Menu -->

jQuery

$(document).ready(function(){
        $(".main-tabs span").click(function(){
            $(this).siblings("ul").slideToggle("fast");
        });
    });

    $(document).ready(function(){
        $(".sub-tabs span").click(function(){
            $(this).siblings("ul").slideToggle("fast");
        });
    });

    $(document).ready(function(){
        $(".drop-tabs span").click(function(){
            $(this).siblings("ul").slideToggle("fast");
        });
    });

CSS

#sub-menu, #drop-menu, #slide-menu {
        display: none;
    }

    .main-tabs, .sub-tabs, .drop-tabs, .slide-tabs {
        list-style-type: none;
        cursor: pointer;
    }

我最初只使用 $(".main-tabs").click(function() 来完成此操作，但是当我尝试单击子菜单链接时，因为它仍然是在第一组 LI 内，菜单会再次折叠，因此我这样做，以便您单击第一个 LI 内的跨度，然后切换它的 UL 同级。

编辑 -

抱歉，这是 jsFiddle为了这。

Answer 1

您只需要第一个脚本

$(document).ready(function() {
  $(".main-tabs span").click(function() {
    $(this).siblings("ul").slideToggle("fast");
  });
});

因为它将定位低于其任何级别的 span 元素。

您当前的代码有两个用于第二个菜单的处理程序和 3 个用于第三级菜单的处理程序。 (正如之前所有应用的那样)

因此，在第二个级别中，第一个处理程序将其打开，第二个处理程序将其关闭。

<小时/>

$(document).ready(function() {
  $(".main-tabs span").click(function() {
    $(this).siblings("ul").slideToggle("fast");
  });
});

#sub-menu,
#drop-menu,
#slide-menu {
  display: none;
}
.main-tabs,
.sub-tabs,
.drop-tabs,
.slide-tabs {
  list-style-type: none;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="main-menu">
  <li class="main-tabs"><span>Home</span>
    <ul id="sub-menu">
      <li class="sub-tabs"><span>Sub-Menu Tabs</span>
        <ul id="drop-menu">
          <li class="drop-tabs"><span>Drop Menu Tabs</span>
            <ul id="slide-menu">
              <li class="slide-tabs"><span>Slide Menu Tabs</span>
              </li>
              <li class="slide-tabs"><span>Slide Menu Tabs</span>
              </li>
              <li class="slide-tabs"><span>Slide Menu Tabs</span>
              </li>
              <li class="slide-tabs"><span>Slide Menu Tabs</span>
              </li>
              <li class="slide-tabs"><span>Slide Menu Tabs</span>
              </li>
            </ul>
            <!-- End Slide Menu -->
          </li>
          <!-- End Drop Tab -->
        </ul>
        <!-- End Drop Menu -->
      </li>
      <!-- End Sub Tabs -->
    </ul>
    <!-- End Sub Menu -->
  </li>
  <!-- End Main Tabs -->
</ul>
<!-- End Main Menu -->