如何使用滑動切換效果執行手風琴

我有垂直菜單，我想爲此菜單執行手風琴。 HTML代碼如何使用滑動切換效果執行手風琴

<ul id="menuLeft"> 
    <li id="ApplicationId" class="menu-li"><span><img src="../Images/tab_arrow.png"></span><a href="#">Application</a> 
     <ul class="submenu-ul" style="display: none;"> 
      <li class="submenu-li"><span><img src="../Images/leftmenu_downarrow.png"></span><a href="#">Basic Information</a> 
      </li> 
      <li class="submenu-li"><span><img src="../Images/leftmenu_downarrow.png"></span><a href="#">Vipin</a> 
      </li> 
     </ul> 
    </li> 
    <li id="ReviewandSubmissionID" class="menu-li"><span><img src="../Images/tab_arrow.png"></span><a href="#">Review and Submission</a> 
     <ul class="submenu-ul" style="display: none;"> 
      <li class="submenu-li"><span><img src="../Images/leftmenu_downarrow.png"></span><a href="#">Nithin</a> 
      </li> 
     </ul> 
    </li> 
</ul>

腳本

$('.submenu-ul').hide(); 
$(document).on("click", ".menu-li", function() { 
    var selected_li = $(this).attr('id'); 
    $('#' + selected_li + ' ul').slideToggle('slow'); 
});

我的問題是，當我點擊一個菜單上顯示其子菜單，但在同一時間。如果我點擊第二個菜單也顯示其子菜單而不關閉第一個子菜單。我該如何解決這個問題？

我編輯我的小提琴演示

HERE

來源

2013-12-11 Niths

隱藏開幕前可見元素新元素。

嘗試：

變化

$u.appendTo($li);

到

$u.appendTo($li).hide(); 

$(document).on("click", "#" + value.MenuId, function() {   
    var selected_li = $(this).attr('id');   
    if(!($('#' + selected_li + ' ul').is(':visible'))){ 
     $('li ul:visible').slideUp(); 
    } 
    $('#' + selected_li + ' ul').slideToggle('slow'); 
});

Updated fiddle here.

來源

2013-12-11 05:37:35 Hiral

@ Hiral- PLZ找到新的小提琴 – Niths

@NithinViswanathan我已經編輯答案。 – Hiral

感謝它的工作 – Niths

在單擊處理滑到其他所有submenu-ul元素

var $subs = $('.submenu-ul').hide(); 
$(document).on("click", ".menu-li", function() { 
    var selected_li = $(this).attr('id'); 
    var $ul = $(this).find('ul').stop(true, true).slideToggle('slow'); 
    $subs.not($ul).stop(true, true).filter(':visible').slideUp(); 
});

演示：Fiddle

來源

2013-12-11 05:36:29

我更新我的演示 – Niths

如何使用滑動切換效果執行手風琴

回答

相關問題