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

Question

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

结果:我想制作一个有多个级别的 slideUp + slideDown 菜单。

我一直在尝试让这个幻灯片菜单工作，但我不确定如何让它工作。我尝试在单击时在某些 css 上使用“高度”0px，但最终我又回到了同样的问题。我可以通过第一次单击使幻灯片菜单工作(意味着有一个 slideUp 和 slideDown)，但是之后的任何级别， slider 只会向上滑动而不是向下滑动，让我看不到任何菜单。这是我所拥有的:

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

每个 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 中的任何一个 li a 时，我可以看到菜单开始向下滑动，但与此同时，整个 ul 向上滑动，什么也没有显示。现在打开的ul是display:none；即使下一个 ul 现在正在显示 block 。我不知道如何让幻灯片像第一次点击时那样继续播放。

如果有更好的方法，我可以重做类(class)等。

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