jquery - 100% 宽度滑动多层 UL

Question

我正在开发一个导航系统，我希望父级 ul 和所有子级 uls 跨越 100% 宽度，当您单击 li 与 child ul ， parent 从左边滑出， child 从右边滑入。这是我到目前为止所拥有的:

$(function() {

  $('.list-container ul > li.has-child').each(function() {
    $(this).find('ul').prepend('<li class="back">< Back</li>');
  });

  $(document).on('click', '.list-container ul > li', function(e) {
    e.stopPropagation();
    var children = $(this).find('ul');
    if (!$(this).hasClass('back')) {
      if (children.length > 0) {
        $(this).parent().css('left','-100%');
        $(this).find('ul > li').css('display','block');
        $(this).find('ul').css('left','100%');
      }
    }
  });

  $(document).on('click','li.back', function(e) {
    e.stopPropagation();
    $(this).parent().parent().parent().css('left','0');
    $(this).parent().css('left','200%');
  });
});

html,body {
  height:100%;
  margin:0;
}
.list-container {
  overflow:hidden;
  width:100%;
}
ul {
  width:100%;
  list-style-type:none;
  padding:0;
  margin:0;
  position:absolute;
  transition: all 0.5s ease;
}

li {
  padding:10px 0 10px 15px;
  border-bottom:1px solid black;
}
  li.has-child:after {
    display:inline-block;
    content:">";
    float:right;
    margin-right:15px;
  }
li > ul {
  display:block;
  left:200%;
  top:0;
}
li > ul > li {
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list-container">
  <ul>
    <li class="has-child">Test 1
      <ul>
        <li class="has-child">Test 1 sub-menu
          <ul>
            <li>Test 1 sub-sub-menu</li>
          </ul>
        </li>
        <li>Test 1 sub-menu a</li>
      </ul>
    </li>
    <li class="has-child">Test 2
      <ul>
        <li>Test 2 sub-menu</li>
        <li class="has-child">Test 2 sub-menu a
          <ul>
            <li>Test 2 sub-sub-menu</li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="has-child">Test 3
      <ul>
        <li>Test 3 sub-menu</li>
        <li class="has-child">Test 3 sub-menu a
          <ul>
            <li>Test 3 sub-sub-menu</li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

此代码按预期用于第一级/第二级元素，但一旦您尝试点击进入第三级(即“测试 1 子菜单”)，它就会变得困惑。我现在意识到使用 divs 而不是 uls 可能会更好，但是任何人都可以建议如何在不修改 HTML 结构的情况下使它工作吗？如果有更好的方法来实现此功能，则愿意完全更改 jQuery/CSS。

Answer 1

This code is working as intended for the first/second level of items, but once you try to click through to the 3rd level(ie "Test 1 sub-menu") it gets messed up.

那是因为，您将 ul 移动一个常数 200%，而子 ul 移动一个常数 +/-100%。同时，您将主 ul 重置为 0。除此之外，当您使用显示 block 显示菜单时，您不会隐藏它们。虽然这适用于第一级，但它会从第二级开始 split 。

I realize now that it probably would have been better to use divs for this rather than uls

是的，使用 div 可能会更好，因为与分层的 ul 相比，您可以更轻松地处理它们。但是，ul 对于层次结构来说会更具语义。

如果您不想更改 HTML 结构，那么最简单和最好的选择就是指定每个子菜单所在的 level。这可以通过简单地添加一个每个 li 上的 data- 属性都有更多子项，您可以摆脱 .has-child 类。在 data- 属性中定义级别后，您可以使用这些属性将每个级别移动相应的系数。

下面是一个粗略的演示。请注意，尽管您已使用 jQuery 对其进行标记，但我还是使用普通的旧 vanila JavaScript 创建了此演示，因为这对我来说更容易、更快速。如果愿意，您可以将它转换为 jQuery，否则它应该可以正常工作，没有任何问题。

演示 fiddle :https://jsfiddle.net/abhitalks/euLzo2dg/

演示片段:

// keep things outside the global scope
(function (window, document) {
  var attachTo = document.getElementsByClassName('list-container')[0];
  prepareNav(attachTo); // attach nav to the div

  function prepareNav(nav) { 
    // prepare nav by creating back links, setting styles, and click handler
    var 
      navBar = nav.firstElementChild, 
      navElems = nav.querySelectorAll('li[data-level] > ul')
    ;
    for (i=0; i < navElems.length; i++) { 
      var backLink = document.createElement('li');
      backLink.className = 'back';
      backLink.textContent = '\u3008' + ' Back';
      navElems[i].insertBefore(backLink, navElems[i].firstElementChild);
    } 
    navBar.style.left = '0%';
    nav.addEventListener('click', function(e) {
      startNav(e, navBar, navElems);
    }, false);
  }

  function startNav(e, navBar, navElems) { 
    // click handler
    if (e.target.dataset && e.target.dataset.level) { 
      // move main ul by negative multiples of level
      navBar.style.left = -(e.target.dataset.level * 100) + '%';
      // reset all menus by hiding those
      [].forEach.call(navElems, function(ne) { ne.classList.remove('show'); }); 
      // show the parent menu
      e.target.parentNode.classList.add('show');
      // show the current menu
      e.target.firstElementChild.classList.add('show');
    }
    if (e.target.className === 'back') { 
      // move back the main ul by 100 (not to 100)
      var leftPos = parseInt(navBar.style.left);
      navBar.style.left = (leftPos + 100) + '%';
    }
  }	
	
})(window, document);

* { box-sizing: border-box; margin: 0; padding: 0; font-family: sans-serif; }
html, body { height:100%; }
.list-container { 
  overflow: hidden; position: relative; 
  width: 100%; min-height: 128px; 
}
.list-container ul {
  width: 100%; background-color: #eee;
  list-style-type: none; 
  position: absolute; left: 0%; top: 0%;
  transition: all .5s ease;
}
.list-container li {
  padding: 10px 0 10px 15px; 
  cursor: pointer; border: 1px solid #aaa; 
}
.list-container li:first-child { border-bottom: none; }
.list-container li:last-child { border-top: none; }
.list-container li.back + li:last-child { border-top: 1px solid #aaa;  }
.list-container li[data-level]::after {
  display: inline-block; content: '\003009';
  float: right; margin-right: 15px;
}
.list-container li[data-level]:hover, 
.list-container li.back:hover { background-color: #ddd; }
.list-container li[data-level] > ul { left: 100%; top: 0; display: none; }
.list-container li[data-level] > ul.show { display: block; }

<div class="list-container">
  <ul>
    <li data-level="1">Test 1
      <ul>
        <li data-level="2">Test 1 sub-menu
          <ul>
            <li>Test 1 sub-sub-menu</li>
          </ul>
        </li>
        <li>Test 1 sub-menu a</li>
      </ul>
    </li>
    <li data-level="1">Test 2
      <ul>
        <li>Test 2 sub-menu</li>
        <li data-level="2">Test 2 sub-menu a
          <ul>
            <li>Test 2 sub-sub-menu</li>
          </ul>
        </li>
      </ul>
    </li>
    <li data-level="1">Test 3
      <ul>
        <li>Test 3 sub-menu</li>
        <li data-level="2">Test 3 sub-menu a
          <ul>
            <li>Test 3 sub-sub-menu</li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>