jquery菜單，點擊切換類一次展開一個列表級別

Question

問題＃1所以我有一個菜單，要求的車型，車型和年份。我有基本的功能工作，但我的代碼不乾淨。我該如何製作這款DRYer？

jQuery(document).ready(function($) { 


$('li.menu-item-type-custom').on('click', function() { 
    $(this).closest('ul.sub-menu').toggleClass('expand-menu'); 
}); 
$('li.menu-item-type-custom').on('click', function() { 
    $(this).find('> ul.sub-menu').toggleClass('expand-menu'); 
}); 


}); 

問題＃2 我也希望每個只有一個孩子做或在時間顯示模式。現在，如果我點擊make 1並設爲2，那麼文本重疊，看起來很糟糕。我試圖

$('li.menu-item-type-custom').on('click', function() { 
    $(this).find('> ul.sub-menu').toggleClass('expand-menu'); 
     if($(this).hasClass("expand-menu")) { 
     $(this).siblings().removeClass("expand-menu") 
     } else{} 
}); 

，但我的做法是錯誤的，它不工作

DEMO： http://jsfiddle.net/BbF9K/

感謝您的幫助

Answer 1

我太累了，整理好你所有類，所以我只使用hide()和show()。隨意將它翻譯回CSS驅動的語句。

http://jsfiddle.net/isherwood/BbF9K/2/

jQuery(document).ready(function ($) { 
    $('li.menu-item-type-custom').on('click', function() { 
     $(this).siblings().find('ul.sub-menu').hide(); 
     $(this).children('ul.sub-menu').show(); 
    }); 
}); 

下面是用幻燈片效果的版本：

http://jsfiddle.net/isherwood/BbF9K/3/

你也可以收緊你的jQuery像這樣：

http://jsfiddle.net/isherwood/BbF9K/4/

jQuery(function($) { 
    $('li.menu-item-type-custom').click(function() { 
     $(this).siblings().find('ul.sub-menu').slideUp(); 
     $(this).children('ul.sub-menu').slideDown(); 
    }); 
});