提升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');
});
}