自定義手風琴使用jQuery

我想創建一個使用jquery的自定義手風琴，已經閱讀了很多關於stackoverflow的解決方案，但我似乎無法讓我的工作，我相信它必須處理。兄弟姐妹。總之，這裏是我的html代碼：自定義手風琴使用jQuery

<div class="menu"> 
    <ul> 
     <li class="current"> 
      <a href="#" class="current"><img class="icon" src=""/>Dashboard</a> 
     </li> 
     <li> 
      <a href="#"><img class="icon" src=""/>Mail</a> 
      <ul class="submenu"> 
       <li> 
        <a href="#" title="">Write New</a> 
       </li> 
       <li> 
        <a href="#" title="">Junk</a> 
       </li> 
       <li> 
        <a href="#" title="">Deleted</a> 
       </li> 
      </ul> 
     </li> 
     <li> 
      <a href="#"><img class="icon" src=""assets/colors.png""/>Child</a> 
      <ul class="submenu"> 
       <li> 
        <a href="#">Child 1</a> 
       </li> 
       <li> 
        <a href="#">Child 2</a> 
       </li> 
       <li> 
        <a href="#">Child 3</a> 
       </li> 
      </ul> 
     </li> 
     <li> 
      <a href="#"><img class="icon" src=""/>Grid</a> 
     </li> 
     <li> 
      <a href="#"><img class="icon" src=""/>Class</a> 
     </li> 
    </ul> 
</div>

這裏是我的jQuery代碼：

$('.menu ul li a').click(function() { 

    $(this).next('.submenu').siblings('li').slideUp(); 
    $(this).next('.submenu').slideToggle(); 

});

菜單切換開放罰款，但是當我打開一個，其他人將無法關閉。

感謝您的幫助！

來源

2011-11-18 d123

它不會關閉的原因是因爲兄弟姐妹會看到同一級別。因此在LI元素中，它會查找更多LI元素。你不是兄弟姐妹LI的父母，並關閉那裏的孩子.submenu。

試試這個：

$(this).parent().siblings('li').find('.submenu').slideUp();

來源

2011-11-18 08:56:42 Niels

嗨Niels，甜蜜的工作！謝謝。在父母和兄弟姐妹面前破壞了我的大腦 – d123

你試圖關閉你即將對一個當前打開打開一個

$（「菜單UL李一。」） .click（function（）{

$('.current').removeClass('current').next('.submenu').siblings('li').slideUp(); 
$(this).addClass('current').next('.submenu').slideToggle();

}）;

來源

2011-11-18 08:58:54

整個代碼將是

$(this).parent().siblings('li').find('.submenu').slideUp(); 
$(this).next('.submenu').slideDown();

只是改變了切換到了slideDown在最後一行....

我有一個疑問，每一個錨將使用用戶選擇可點擊......可我們使它只有一級錨點擊。任何想法？

來源

2011-11-18 09:59:59 Neelesh

自定義手風琴使用jQuery

回答

相關問題