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

Question

所以我正在处理这个菜单，我试图在点击时 expand/contract。在与 javascript 战斗了 2 周（业余时间）后，我决定尝试用 jQuery 解决这个问题。简单多了！好吧，有点。我设法打开了我的 4 级菜单的第 2 级，但是当我尝试打开第 3 级时，它滑入视图，并立即再次滑出。好像在跟我玩"peek-a-boo"

代码逻辑适用于第 2 级，所以理论上它应该适用于所有级别，对吧？如何调整此代码以便我的切换工作？

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

Answer 2

您目前正在将多个点击事件绑定到相同的元素。您需要使用 > 选择器将选择器的范围限定为子级...

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

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

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

Working demo

您也只需要一个文档就绪块

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

Playing "peek-a-boo" with jQuery Menu

javascript

jquery

menu

toggle