提升bootstrap中navbar子菜单的用户体验
一、如果是PC则移除navbar的dropdown点击事件
bootstrap带有子菜单的navbar,默认dropdown是需要点击展开子菜单的,用户体验不是很好。
可增加如下js代码来实现
// 如果是PC则移除navbar的dropdown点击事件 if (!/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobi/i.test(navigator.userAgent)) { $("#navbar-collapse [data-toggle='dropdown']").removeAttr("data-toggle"); } else { $(".navbar-nav ul li:not(.dropdown-submenu):not(.dropdown) a").removeAttr("data-toggle"); }
二、如果是PC则为navbar的下拉菜单增加链接功能
bootstrap带有子菜单的navbar,因为默认是点击展开子菜单的。所以默认就失去了父菜单的链接功能,可通过如下js代码来找回链接功能
//如果是PC则为navbar的下拉菜单增加链接功能 if (!/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobi/i.test(navigator.userAgent)) { $(document).on("click",".dropdown-toggle",function(){ if($(this).attr('href')) window.location = $(this).attr('href'); }); }
<< 上一篇
下一篇 >>