[英]Vertical menu type accordion
我對垂直菜單式手風琴有疑問。
<div class="nav-section-container-large" data-set="nav-section" role="navigation">
<div class="nav-section">
<span class="nav-section-heading delta">In this section:</span>
<ul class="nav-section-level-2">
<li><a href="" class="">Investment advantage</a></li>
<li><a href="" class="">Statistics </a></li>
<ul class="nav-section-level-3">
<li><a href="" class="">Clean technology</a></li>
<li><a href="" class="">Food and beverage</a></li>
<li><a href="" class="">Fund investment</a></li>
<li><a href="" class="">High-value manufacturing</a></li>
<li><a href="" class="">Information and communications technology</a></li>
<li><a href="" class="">Infrastructure</a></li>
<li><a href="" class="">Life sciences</a></li>
<li><a href="" class="">Petroleum and minerals</a></li>
<li><a href="" class="">Resource manufacturing</a></li>
</ul>
<li><a href="" class="">Investment regulations</a></li>
<li><a href="" class="">How can we help</a></li>
<li class="is-selected"><a href="" class="">Sectors of opportunity</a>
<ul class="nav-section-level-3">
<li><a href="" class="">Clean technology</a></li>
<li><a href="" class="">Food and beverage</a></li>
<li class="is-selected"><a href="" class="selected">Fund investment</a></li>
<li><a href="" class="">High-value manufacturing</a></li>
<li><a href="" class="">Information and communications technology</a></li>
<li><a href="" class="">Infrastructure</a></li>
<li><a href="" class="">Life sciences</a></li>
<li><a href="" class="">Petroleum and minerals</a></li>
<li><a href="" class="">Resource manufacturing</a></li>
</ul>
</li>
</ul>
</div>
</div>
和
<script type="text/javascript">
$(function(){
$(document).on('click', ".nav-section-level-2 li", function(e){
e.preventDefault();
$(this).addClass('is-selected').siblings('.is-selected').removeClass('is-selected');
if ($(this).hasClass('is-selected') && $('.nav-section-level-3 li').hasClass('is-selected') )
$('.nav-section-level-2 ul').slideToggle('slow', function() { $(this).toggleClass('is-selected'); });
});
$(document).on('click', ".nav-section-level-3 li", function(e){
e.preventDefault();
$(this).addClass('is-selected').siblings('.is-selected').removeClass('is-selected');
});
});
</script>
算法垂直菜單正在運行,但是非常糟糕。 折疊和展開無法正常工作!
我如何找到解決問題的辦法?
請准備好解決(鍵入JQuery UI)不提供。
非常感謝你。
我不確定我是否正確。 但這是一種解決方案:
$(function(){
$(".nav-section-level>li").on('click',function(e){
var ulElement = $(this).find('ul');
var isSameElement = $(ulElement).hasClass("open");
if( $("ul.open") !== undefined){
$("ul.open").slideToggle('slow');
$("ul.open").removeClass("open");
}
if(!isSameElement){
$(ulElement).slideToggle('slow');
$(ulElement).addClass("open");
}
});
});
首先,您的html有點混亂。 其次,您無需向li添加任何類或任何內容。 單擊即可簡單滑動。 這將顯示隱藏您的孩子ul。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.