播放"peek-a-boo"与jQuery菜单 [英] Playing "peek-a-boo" with jQuery Menu

问题描述

因此，我正在尝试使用此菜单进行扩展/收缩.在用JavaScript争取了2周的时间(业余时间)之后，我决定尝试使用jQuery解决此问题.这么简单！好吧，有点.我设法将4级菜单的2级打开，但是当我尝试打开3级时，它滑入视图，并立即再次滑出.就像和我一起玩捉迷藏"一样.

So I'm working on this menu that I'm trying to expand/contract on click. After fighting for 2 weeks (in my spare time) with javascript, I've decided to try and tackle this with jQuery. It's so much easier! Well, kinda. I managed to make the 2nd level of my 4 level menu open, but when I try to open the 3rd level, it slides into view, and immediately slides out again. Like it's playing "peek-a-boo" with me.

代码逻辑在第二层上起作用，因此从理论上讲它应该在所有层上起作用，对吗?如何调整此代码，以使切换生效?

The code logic works on the 2nd level, so in theory it should work for all levels, right? How do I tweak this code so that my toggles work?

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同级.

I originally did this using just $(".main-tabs").click(function(), but then when I tried to click on the sub-menu links, since it was still inside the 1st set of LI's, the menu would collapse again, so I made it so you click on the span inside the 1st LI, and then you toggle it's UL sibling.

编辑-

抱歉，这是 jsFiddle .

推荐答案

您只需要第一个脚本

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

因为它将在其下面的任何级别定位span个元素.

As it will target span elements at any level below it.

您当前的代码在第二个菜单中有两个处理程序，在第三级中有3个处理程序. (也适用于所有以前的)

You current code had two handlers for the second menu and 3 for the 3rd level. (as all previous applied also)

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

So in your second level the first handler toggled it on, and the second toggled it off.

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

这篇关于播放"peek-a-boo"与jQuery菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！