Question

示例：https://jsfiddle.net/lmgonzalves/xj6a74jy/1/

结果：我想让slideUp + slideDown菜单有多个级别。

我一直试图让这个幻灯片菜单工作，我不知道如何让它工作。我已经尝试在点击时使用“高度”0px“在某些css上，但最终我回到了同样的问题。我可以通过第一次点击使幻灯片菜单工作（意味着有一个slideUp和slideDown），但是任何级别之后滑块只是向上滑动而不是向下滑动而没有可见的菜单。这就是我所拥有的：

$('.mobile-nav .navigation a').on('click',function(e){
  e.preventDefault();
  var t = $(this);
  var active = t.closest('li.active');
  active.children('ul,a, li.back').not(t.closest('ul')).slideUp();
  t.next('ul').slideDown();
});

.mobile-nav .navigation {background:#eee; width:250px; position:relative;}
.mobile-nav .navigation ul {margin:0; padding:0;}
.mobile-nav .navigation a {display:block; line-height:30px;}
.mobile-nav .navigation li ul {display:none;}

<div class="mobile-nav">
   <div class="navigation">
      <ul>
         <li class="active">
            <a href="#">All</a>
            <ul style="display:block;">
               <li>
                  <a href="#">Topic 1</a>
                  <ul>
                     <li class="back">Back</li>
                     <li>
                        <a href="/sometopic.aspx">Some Topic</a>
                        <ul>
                           <li class="back">Back</li>
                           <li>
                              <a href="/sometopic.aspx">Some Topic1</a>

<（>（（菜单不断重复，使用格式

主题1
主题1
主题2 < / li>

每个ul中有不同数量的li。

所以第一个ul看起来像这样：

 <div class="mobile-nav">
   <div class="navigation">
      <ul>
        <li class="active">
           <a href="#">All</a>
        </li>
      </ul>
      /* With 3 more ul's and li's in each
      <ul></ul>
      <ul></ul>
      <ul></ul>
   </div>
 </div>

当我点击其中一个href标签时，菜单滑动到下一个级别，显示ul，即第二个ul。但是当我点击这个ul中的任何一个时，我可以看到菜单开始向下滑动，但同时，整个ul向上滑动显示任何内容。现在打开的ul是display：none;即使下一个ul现在显示阻止。我无法弄清楚如何保持幻灯片像第一次点击一样。

我可以重做类等，如果有更好的方法来实现这一点。

Answer 1

摆弄一些东西：Fiddle

希望这就是你所需要的。刚刚改变了选择元素的方式。

(function ($) {
"use strict";

$('.mobile-nav')
    .on('click', 'a', function (e) {
        var $cTarget = $(e.currentTarget),
            $dropdown = $cTarget.next('ul'),
            $parentUl = $cTarget.closest('ul'),
            $activeElem = $parentUl.find('ul.active');

        $parentUl.children('li').each(function (key, elem) {
            var $elem = $(elem); 

            if(!$cTarget.parent('li').is($elem)) {
                $elem.slideUp();    
            }
        });

        $activeElem.toggleClass('active').slideUp();

        if (!$dropdown.is($activeElem)) {
            $dropdown.toggleClass('active').slideDown();
        } 
    })
    .on('click', '.back', function (e) {
        var $cTarget = $(e.currentTarget),
            $dropdown = $cTarget.closest('ul');

        $dropdown.toggleClass('active').slideUp();
        $cTarget.parents('li').first().siblings().slideDown();

    });})(jQuery);

Answer 2

所以这些答案彼此非常接近，但我还没有看到符合你的答案;只有一个项目可以按照时间标准开放。＆＃34;如果你想坚持使用slipeUp和slideDown，那么JQuery有点冗长，但这里是顶级无序列表处理它的代码示例：

$('.toplevel > span').click(function () {
    if ($(this).parent().hasClass('activeTop')) {
        $('.activeTop').removeClass('activeTop');
        $(this).parent().children('ul').slideUp();
        return;
    }
    $('.activeTop').children('ul').slideUp();
    $('.activeTop').removeClass('activeTop');
    $(this).parent().addClass('activeTop');
    $('.activeTop').children('ul').slideDown();
});

我用跨度替换了一个标签（并稍微清理了一下HTML），所以我没有必要处理我的演示小提琴导航，但是here's a demo实现了top和二级菜单项。

Answer 3

看看这个小提琴，我会让你的结构更简单，就像这个https://jsfiddle.net/jk90pxgt/1/，然后你的jQuery只有几行。如果您愿意，您可以显然添加后退按钮，但这只是一种更简洁的方式来执行幻灯片菜单。也不要使用链接并防止默认，它只是额外的代码。只需在LI

上执行点击功能即可

这是jQuery

$(".mobile-menu li").click(function(e){
     e.stopPropagation();
     $(this).children(".sub-menu").slideToggle();
});

新HTML结构

<ul class="mobile-menu">
<li>First Item
    <ul class="sub-menu">
        <li>First Sub-Item
            <ul class="sub-menu">
                <li>First Sub-Item</li>
                <li>Second Sub-Item</li>
            </ul>
        </li>
        <li>Second Sub-Item</li>
    </ul>
</li>
<li>Second Item
     <ul class="sub-menu">
        <li>First Sub-Item
            <ul class="sub-menu">
                <li>First Sub-Item
                    <ul class="sub-menu">
                        <li>First Sub-Item</li>
                        <li>Second Sub-Item</li>
                    </ul>
                </li>
                <li>Second Sub-Item</li>
            </ul>
        </li>
        <li>Second Sub-Item</li>
    </ul>
</li>
<li>Third Item</li>
</ul>

和CSS

.sub-menu {
    display:none;
}

li {
    cursor:pointer;
}

Answer 4

以下是我能够做到这一点的方法：

$('.mobile-nav .navigation a').on('click',function(e){
  var t = $(this), li = t.closest('li'), ul = li.closest('ul'), a = ul.siblings('a');
  if(li.hasClass('back')) {
    e.preventDefault();
   //do back code here
    var sib = ul.closest('li').siblings('li');
    a = ul.parents('ul').eq(0).siblings('a');
    ul.slideUp();
    sib.add(a).slideDown();
  } else if(t.siblings().length > 0) {
    e.preventDefault();
    li.siblings('li').add(a).slideUp();
    t.next('ul').slideDown();
  }
});

如何使这个幻灯片菜单工作

4 个答案: