问题描述
你能帮我处理这个代码吗?
$(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}} 你会在我上面的代码中找到它