Bootstrap学习笔记，5--实现Bootstrap导航条可点击和鼠标悬停显示下拉菜单 - Jacklovely

2024-03-17 16:14•python•阅读 5027

Bootstrap学习笔记（5）--实现Bootstrap导航条可点击和鼠标悬停显示下拉菜单

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

微笑的鱼
2014-01-03
Bootstrap
5,281 次围观
11条评论

使用Bootstrap导航条组件时，如果你的导航条带有下拉菜单，那么这个带下拉菜单的导航在点击时只会浮出下拉菜单，它本身的href属性会失效，也就是失去了超链接功能，这并不是我想要的，我希望导航条的链接可以正常打开它的链接，但又需要下拉菜单功能，开始折腾~

首先解决带下拉菜单的导航条可以点击问题，下拉菜单效果是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\');
        });
}

posted on 2017-02-25 11:13 Jacklovely 阅读(2481) 评论(0) 编辑收藏举报

  // 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\');
        });
}