Javascript：单击按钮时多级菜单滑动

如何解决Javascript：单击按钮时多级菜单滑动

你能帮我处理这个代码吗？

$(document).ready(function(){
  /* Panel Slide */
  var btn = document.getElementsByClassName("btnBorder");
  var i;

  for (i = 0; i < btn.length; i++) {
    var panel = btn[i].nextSibling;
    btn[i].addEventListener("click",function() {
      $(".btnBorder").hide();
      panel.show();
    });
  }
});

<div id="menu" class="sector-row">
      <ul>
        <li>
          <div class="btnBorder flex">logo <i class="ml-auto fa fa-angle-right"></i></div>
          <ul class="slide-panel">
              demo
          </ul>
        </li>
        <li>
          <div class="btnBorder flex">Navigazione <i class="ml-auto fa fa-angle-right"></i></div>
        </li>
        <li>
          <div class="btnBorder flex">Widgets <i class="ml-auto fa fa-angle-right"></i></div>
        </li>
        <li>
          <div class="btnBorder flex">Footer <i class="ml-auto fa fa-angle-right"></i></div>
        </li>
      </ul>
    </div>

我想制作一个多级菜单幻灯片，但没有显示元素“幻灯片面板”...

解决方法

我不太喜欢将纯 javascript 与 jquery 混合使用 .. 所以下一个代码在 jquery 中 .. 另外我更喜欢使用 add/remove/toggleClass 而不是 hide/show()

$(document).ready(function(){
  $('.btnBorder').on('click',function(e){
    var ul_selector = $(this).next('ul.slide-panel'); // OR $(this).closest('li').find('ul.slide-panel');
    e.stopPropagation(); // it will prevent the parent click if you've one
    $('ul.slide-panel').not(ul_selector).addClass('hide'); // if you need to hide other slide-panels 
    ul_selector.toggleClass('hide'); // toggle the class hide which in css is display:none and added to the slide-panel html element
  });
});

.slide-panel.hide{
  display : none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="menu" class="sector-row">
  <ul>
    <li>
      <div class="btnBorder flex">Logo <i class="ml-auto fa fa-angle-right"></i></div>
      <ul class="slide-panel hide">
        Demo
      </ul>
    </li>
    <li>
      <div class="btnBorder flex">Navigazione <i class="ml-auto fa fa-angle-right"></i></div>
    </li>
    <li>
      <div class="btnBorder flex">Widgets <i class="ml-auto fa fa-angle-right"></i></div>
    </li>
    <li>
      <div class="btnBorder flex">Footer <i class="ml-auto fa fa-angle-right"></i></div>
    </li>
  </ul>
</div>

注意：使用.next()时的问题，如果元素有<!-- -->或</br>，它不会选择正确的元素..所以你可以使用{ {1}} 你会在我上面的代码中找到它