问题#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和make 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/
谢谢您的帮助
最佳答案
我太累了,无法整理所有的课程,所以我只用了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();
});
});
关于javascript - 单击的Jquery菜单切换类以一次扩展一个列表级别,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/24254329/