bootstrap菜单展开收起_菜单展开及收缩效果 bootstrap+jquery

本文介绍了如何使用 jQuery 和 Bootstrap 实现菜单的展开和收起效果。通过监听点击事件,动态地调整菜单的状态,包括切换展开/收起的样式,以及更新导航图标的显示。同时,当窗口尺寸变化时,针对小屏幕设备,提供了悬浮展开和点击收起的交互体验。
摘要由CSDN通过智能技术生成

//左侧菜单 Jquery slideUp/slideDown

var leftmenu = $(function() {

$(".mymenu").click(function() {var mymenu = $(this.parentElement);

$(".treeview-menu").slideUp("slow", function() {

$(".active").toggleClass("active treeview")//收起其他打开的菜单

$(".glyphicon-menu-down").toggleClass("glyphicon-menu-down glyphicon-menu-left");

});if ($(this.parentElement.lastElementChild).attr("style") == "display: none;" || $(this.parentElement.lastElementChild).attr("style") ==undefined) {

$(this.parentElement.lastElementChild).slideDown("slow", function() {//sidedown收起完成后的操作

mymenu.toggleClass("active treeview");//更新图标

$(this.parentElement.firstElementChild.lastElementChild).toggleClass("glyphicon-menu-down glyphicon-menu-left");

});

}

});//子菜单点击效果

$("._menuitem").click(function() {

$("._menuitem").removeClass("active");

$(this).toggleClass("active");

});

});//侧边菜单隐藏与展示

var adminrmax = $(function() {

$.AdminLTE={};

$.AdminLTE.options={//Add slimscroll to navbar menus

//This requires you to load the slimscroll plugin

//in every page before app.js

navbarMenuSlimscroll: true,

navbarMenuSlimscrollWidth:"3px", //The width of the sc

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值