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{}
});

但我的做法是错误的，并且它没有工作

样本： 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();
    });
});

单击的Jquery菜单切换类以一次扩展一个列表级别

1 个答案: