html 中的 js 的下拉菜单

html 中的 js 的下拉菜单

$(document).ready(function() {
	//1.监听一级菜单的点击事件
	$(".drop-down>li").click(function() {
		//1.1拿到二级菜单
		var sub = $(this).children(".sub");
		//1.2让二级菜单展开
		sub.slideDown(400);
		//1.3拿到多有非当前的二级菜单
		var siblings = $(this).siblings().children(".sub");
		//1.4让所有非当前的二级菜单收起
		siblings.slideUp(400);
		//1.5让被点击的一级菜单箭头旋转
		$(this).children("span").children("i").removeClass("fa fa-angle-double-left");
		$(this).children("span").children("i").addClass("fa fa-angle-double-down");
		//1.6让所有非点击的一级菜单箭头还原
		$(this).siblings().children("span").children("i").removeClass("fa fa-angle-double-down");
		$(this).siblings().children("span").children("i").addClass("fa fa-angle-double-left");
	});
});
$(document).ready(function() {
	//1.监听一级菜单的点击事件
	$(".card-drop-down>li").click(function() {
		//1.1拿到二级菜单
		var sub = $(this).children(".card-sub");
		//1.2让二级菜单展开
		sub.slideToggle(400);
	});
});