[英]Javascript: multi level menu slide on button click
你能帮我处理这段代码吗?
$(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>
注意:如果元素有<!-- -->
或</br>
,则使用.next()
时的问题不会 select 正确的元素.. 所以你可以使用.closest().find()
你会在我上面的代码中找到它
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.