简体   繁体   English

jQuery的嵌套手风琴菜单问题

[英]Nested Accordion Menu issue with jQuery

I'm trying to display the links Test 1 & Test 2 when I click on Dropdown 1 . 单击Dropdown 1时,我试图显示链接Test 1Test 2 Currrently they disappear super fast. 目前,它们以极快的速度消失。 How can I fix this? 我怎样才能解决这个问题?

Fiddle: http://jsfiddle.net/4dm318nn/ 小提琴: http : //jsfiddle.net/4dm318nn/

Here is my Javascript: 这是我的Javascript:

  $(document).ready(function($) {
    $('.inline').find('.navtoggle').click(function(){

      //Expand or collapse this panel
      $(this).next().slideToggle('fast');

      //Hide the other panels
      $(".sub-menu").not($(this).next()).slideUp('fast');

    });
  });

This dirty hack resolves my issue a little, but it's not perfect: jsfiddle.net/4dm318nn/1 这个肮脏的hack稍微解决了我的问题,但这并不完美:jsfiddle.net/4dm318nn/1

<nav class="medium-8 columns primary menu">
    <ul class="inline naked">
        <li class="primary-item"><a href="http://localhost:8888/test/wordpress">Home</a></li>                       
        <li id="menu-item-74" class="primary-item menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-74"><a href="#" class="navtoggle">Dropdown 1</a>
            <ul class="sub-menu">
                <li id="menu-item-76" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-76"><a href="http://localhost:8888/test/wordpress/?page_id=45">Dropdown 2</a>
                    <ul class="sub-menu">
                        <li id="menu-item-77" class="sub-sub-menu menu-item menu-item-type-post_type menu-item-object-page menu-item-77"><a href="http://localhost:8888/test/wordpress/?page_id=47">Test 1</a></li>
                        <li id="menu-item-78" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-78"><a href="http://localhost:8888/test/wordpress/?page_id=49">Test 2</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</nav>

  $(document).ready(function($) {
    $('.inline').find('.navtoggle').click(function(){

      //Expand or collapse this panel
      $(this).next().slideToggle('fast');

      //Hide the other panels
      $(".sub-menu").not($(this).next()).slideUp('fast');

    });
  });

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM