的JavaScript切換菜單崩潰的問題

Question

我創建了一個JavaScript切換菜單：

$(document).ready(function() { 
    $('.toggle').click(function() { 
     if ($(this).hasClass("expanded")) { 
      $(this).next().slideUp("fast"); 

     } else { 
      $('.toggle').next().slideUp("fast").removeClass("expanded"); 
      $(this).next().slideDown("fast"); 
      $(this).removeClass("collapsed"); 
      $(this).addClass("expanded"); 
     } 
    }); 
}); 

當我點擊菜單中的其他項目，類別「擴張」是不是從其他元素中刪除。我嘗試了許多不同的東西，但無法擺脫困境。任何幫助，將不勝感激。

Answer 1

$(document).ready(function() { 
    $('.toggle').click(function() { 
     if ($(this).hasClass("expanded")) { 
      $(this).next().slideUp("fast"); 
      $(this).addClass('collapsed'); 
      $(this).removeClass('expanded'); 
     } else { 
      var $expandedItems = $('.expanded'); 
      $expandedItems.next().slideUp("fast") 
      $expandedItems.addClass('collapsed'); 
      $expandedItems.removeClass('expanded'); 
      $(this).next().slideDown("fast"); 
      $(this).removeClass("collapsed"); 
      $(this).addClass("expanded"); 
     } 
    }); 
}); 

根據你的意見，我認爲你是在這樣的事情之後。

Answer 2

$(document).ready(function() { 
    $('.toggle').click(function() { 
     if ($(this).hasClass("expanded")) { 
      $(this).next().slideUp("fast"); 

     } else { 
      $('.expanded').removeClass('expanded');//here is your problem 
      $(this).next().slideDown("fast"); 
      $(this).removeClass("collapsed"); 
      $(this).addClass("expanded"); 
     } 
    }); 
}); 

這應該是從你的jQuery代碼刪除擴展類

注意測試雖然請告訴我，如果它不工作

更新

Demo

而jQuery的，我認爲你缺少太多的信息在這裏檢查演示Demo