Playing “peek-a-boo” with jQuery Menu

问题

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

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.

EDIT -

Sorry, here's the jsFiddle for this.

回答1:

You only need the first script

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

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

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

回答2:

You are currently binding multiple click events to the same elements. You need to scope your selectors to the children with the > selector...

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

You also only need one doc ready block

来源：https://stackoverflow.com/questions/30111841/playing-peek-a-boo-with-jquery-menu

标签

javascript

jquery

toggle