A-A+

Bootstrap导航条可点击和鼠标悬停显示下拉菜单

2016年01月11日 建站推广 暂无评论 阅读 629 次

1.bootstrap.js  或者 bootstrap.min.js

首先解决带下拉菜单的导航条可以点击问题,下拉菜单效果是JS实现的,分析bootstrap.js文件发现,Bootstrap把下拉菜单写成了一个JQuery插件,在dropdown代码段中找到了关键的几句:

// APPLY TO STANDARD DROPDOWN ELEMENTS
  // ===================================
  $(document)
    .on('click.bs.dropdown.data-api', clearMenus)
    .on('click.bs.dropdown.data-api', '.dropdown form', function(e) { e.stopPropagation() })
    .on('click.bs.dropdown.data-api', toggle, Dropdown.prototype.toggle)
    .on('keydown.bs.dropdown.data-api', toggle + ', [role=menu]', Dropdown.prototype.keydown)

找到几句关键代码后,想到了解决办法,只要把其中click.bs.dropdown.data-api事件关闭就OK了,代码如下:

$(document).ready(function(){
    $(document).off('click.bs.dropdown.data-api');
});

以上代码测试有效,导航条可点击问题解决,下面解决鼠标悬停弹下拉菜单问题,这个相对简单些,用JQuery的鼠标事件就可实现,代码如下:

$(document).ready(function(){
    dropdownOpen();//调用
});
/**
 * 鼠标划过就展开子菜单,免得需要点击才能展开
 */
function dropdownOpen() {
    var $dropdownLi = $('li.dropdown');
    $dropdownLi.mouseover(function() {
        $(this).addClass('open');
    }).mouseout(function() {
        $(this).removeClass('open');
    });
}
ps2:

在主题的js文件中加入如下代码即可:
$(document).on("click",".dropdown-toggle",function(){
if($(this).attr(‘href’)) window.location = $(this).attr(‘href’);
});

以上代码的意思是,点击菜单选项时,如果当前选项具有“href”属性,那么点击它时页面跳转至href属性所链接的页面。

可如果我们的主题是响应式主题,在手机端浏览的时候,我们希望点击菜单时不跳转,而是bootstrap默认的行为(出现下拉菜单),该如何操作呢?只要在上面的js代码中加上一个判断语句即可:

$(document).on("click",".dropdown-toggle",function(){
if( $(window).width() > 767 )
if($(this).attr(‘href’)) window.location = $(this).attr(‘href’);
});

以上代码的意思是,在设备宽度超过767像素的时候,点击菜单才会跳转,而小于等于767像素时并不执行语句。

标签:

给我留言

Copyright © web前端技术开发个人博客 保留所有权利  京ICP备14060653号 Theme  Ality

用户登录