自定義accordeon菜單，jQuery

我寫了一個菜單結構here。它應該是手風琴類型的菜單 - 當你點擊一個打開的項目時，當你點擊另一個項目時，它會打開並關閉第一個項目。我嘗試了不同的事情，仍然無法正常工作。有人可以檢查代碼並告訴必須添加的內容嗎？謝謝！ html必須保持不變。自定義accordeon菜單，jQuery

<ul class="side_menu"> 
<li><span>Level 1</span> 
    <ul> 
     <li><span>Level 2</span> 
      <ul> 
       <li><a href="#">Level 3</a></li> 
       <li><a href="#">Level 3</a></li> 
       <li><a href="#">Level 3</a></li> 
      </ul> 
     </li> 
     <li><span>Level 2</span> 
      <ul> 
       <li><a href="#">Level 3</a></li> 
       <li><a href="#">Level 3</a></li> 
       <li><a href="#">Level 3</a></li> 
       <li><a href="#">Level 3</a></li> 
      </ul> 
     </li> 
     <li><span>Level 2</span> 
      <ul> 
       <li><a href="#">Level 3</a></li> 
       <li><a href="#">Level 3</a></li> 
       <li><a href="#">Level 3</a></li> 
      </ul> 
     </li> 
    </ul> 
</li> 
<li><span>Level 1</span> 
    <ul> 
     <li><span>Level 2</span> 
      <ul> 
       <li><a href="#">Level 3</a></li> 
       <li><a href="#">Level 3</a></li> 
       <li><a href="#">Level 3</a></li> 
       <li><a href="#">Level 3</a></li> 
      </ul> 
     </li> 
     <li><span>Level 2</span> 
      <ul> 
       <li><a href="#">Level 3</a></li> 
       <li><a href="#">Level 3</a></li> 
       <li><a href="#">Level 3</a></li> 
      </ul> 
     </li> 
    </ul> 
</li> 
<li><span>Level 1</span> 
    <ul> 
     <li><span>Level 2</span> 
      <ul> 
       <li><a href="#">Level 3</a></li> 
       <li><a href="#">Level 3</a></li> 
       <li><a href="#">Level 3</a></li> 
      </ul> 
     </li> 
     <li><span>Level 2</span> 
      <ul> 
       <li><a href="#">Level 3</a></li> 
       <li><a href="#">Level 3</a></li> 
       <li><a href="#">Level 3</a></li> 
      </ul> 
     </li> 
     <li><span>Level 2</span> 
      <ul> 
       <li><a href="#">Level 3</a></li> 
       <li><a href="#">Level 3</a></li> 
      </ul> 
     </li> 
    </ul> 
</li> 
</ul>

這是我的JS：

jQuery(".side_menu li span").click(function(){ 
    if (jQuery(this).parent("li").hasClass("opened")) 
    { 
     jQuery(this).parent("li").removeClass("opened"); 
     jQuery(this).next("ul").slideUp(200); 
    } else { 
     jQuery(this).parent("li").addClass("opened"); 
     jQuery(this).next("ul").slideDown(200); 
    }; 
    });

來源

2013-09-25 Andrey

爲什麼你使用'opened'類，你使用它作爲一個標誌，檢查元件打開..或者你已經提供了'open' –

一些樣式表阿爾俊，是的，有開放式的風格。看到http://jsfiddle.net/VMsh4/5/ – Andrey

我肯定的更少的代碼風扇。切換這些元素應該能讓你滿意。喜歡的東西：

jQuery(".side_menu li span").click(function(){ 
    $li = jQuery(this).closest('li'); 
    $li.toggleClass('open'); 
    $li.siblings('.open').removeClass('open').find('>ul').slideToggle(200); 
    $li.find('>ul').slideToggle(200); 
});

Fiddle

來源

2013-09-25 13:39:19 Chad

甚至[少代碼]（http://jsfiddle.net/tetri/eTVW7/1/）...真棒解決方案！ +1 – tetri

感謝您的快速回答，乍得！我忘了更新我最初的小提琴，它應該看起來像這樣 - http://jsfiddle.net/VMsh4/2/（注意level2造型）。你的js可以正常工作，但Level2樣式錯過 - http://jsfiddle.net/VMsh4/4/你可以檢查它嗎？ – Andrey

只需將課程從打開改爲打開即可。 – Chad

自定義accordeon菜單，jQuery

回答

相關問題