Javascript: 多级菜单滑动按钮点击

Question

你能帮我看看这段代码吗？

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

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

Answer 1

我不太喜欢将纯 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>则不会select正确的元素..所以你可以使用.closest().find()你会在我上面的代码中找到它

Javascript: 多级菜单滑动按钮点击

Javascript: multi level menu slide on button click

javascript

css

jquery

menu