【bootstrap 3.3.5】PC端使用hover事件，在手机端使用click事件

最新推荐文章于 2025-03-01 00:15:58 发布

weixin_30569033

最新推荐文章于 2025-03-01 00:15:58 发布

阅读量315

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Zell-Dinch/articles/5639642.html

本文介绍了一种在PC端使用Bootstrap时对下拉菜单进行hover事件改造的方法，并提供了一个判断用户是否使用PC端的函数。通过这种方式，可以在PC上使用hover代替click事件来打开下拉菜单。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我的思路是"拿来主义"！但：

1. 需要判断用户终端设备

function isPC() {
    var userAgentInfo = navigator.userAgent;
    var Agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod");
    var flag = true;
    for (var v = 0; v < Agents.length; v++) {
        if (userAgentInfo.indexOf(Agents[v]) > 0) { flag = false; break; }
    }
    return flag;
}

2. 改造bootstrap中的click事件

;(function($, window, undefined) {
    // outside the scope of the jQuery plugin to
    // keep track of all dropdowns
    var $allDropdowns = $();

    // if instantlyCloseOthers is true, then it will instantly
    // shut other nav items when a new one is hovered over
    $.fn.dropdownHover = function(options) {

        // the element we really care about
        // is the dropdown-toggle's parent
        $allDropdowns = $allDropdowns.add(this.parent());

        return this.each(function() {
            var $this = $(this).parent(),
                defaults = {
                    delay: 500,
                    instantlyCloseOthers: true
                },
                data = {
                    delay: $(this).data('delay'),
                    instantlyCloseOthers: $(this).data('close-others')
                },
                options = $.extend(true, {}, defaults, options, data),
                timeout;

            $this.hover(function() {
                if(options.instantlyCloseOthers === true)
                    $allDropdowns.removeClass('open');

                window.clearTimeout(timeout);
                $(this).addClass('open');
            }, function() {
                timeout = window.setTimeout(function() {
                    $this.removeClass('open');
                }, options.delay);
            });
        });
    };
    
})(jQuery, this);

3. 应用如下

if(isPC()) {//【bootstrap3.3.5】如果是PC则应用hover，否则使用默认click
     $('#demo-navigation [data-toggle="dropdown"]').dropdownHover();
}

转载于:https://www.cnblogs.com/Zell-Dinch/articles/5639642.html