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

Posted 2023-05-08

【中文标题】Javascript：单击按钮时的多级菜单滑动

【英文标题】：Javascript: multi level menu slide on button click

【发布时间】：2021-04-28 19:50:54

【问题描述】：

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

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

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

【问题讨论】：

幻灯片面板是另一个 ul 元素中的 ul 元素吗？你点击什么来让这个 ul 元素显示出来？看起来您试图在 4 个 div 上添加一个类名为 btnBorder 的事件侦听器？ panel.show() 有什么作用？

如您所见，如果我单击按钮 btnBorder 我需要将元素 ul 显示为该按钮的下一个元素。

那么，panel 是每个按钮的 nextSibling 吗？试试console.log（面板）有没有报错信息？

是的：panel.show() 不是函数

这应该对你有帮助。你需要一个 show() 函数...

【参考方案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>它不会选择正确的元素..所以你可以使用.closest().find()你会发现它在我上面的代码中

【讨论】：

嗨，我已经尝试了新代码，它完全可以工作。 :) 你能帮我这个行代码吗？ var logo = $('#logo').val(); var myLogo = document.getElementById('title-logo'); myLogo.innerText = logo;

@Fabbro #logo if input or select use .val() else use .text() and var myLogo = $('#title-logo'); to set a text myLogo.text(logo);