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>

我想制作一個多級菜單幻燈片，但“幻燈片面板”元素沒有出現......

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>

注意：如果元素有<!-- -->或</br> ，則使用.next()時的問題不會 select 正確的元素.. 所以你可以使用.closest().find()你會在我上面的代碼中找到它