根据浏览器大小将菜单更改为触摸屏功能

时间:2019-02-26 11:10:58

标签: javascript drop-down-menu responsive-design

我有一个下拉菜单,其工作方式如下:

鼠标悬停时的传统下拉列表。

在触摸设备上单击时激活了下拉菜单(手风琴样式)。

除了用户在使用调整大小的浏览器的笔记本电脑/台式机上浏览时,它运行完美。设计更改为触摸屏样式视图,但是mouseover事件使菜单几乎不可用。 JS代码如下。

var cbpHorizontalMenu = (function() {
    var b = $("#cbp-hrmenu > ul > li"),
        g = b.children("a"),
        c = $("body"),
        d = -1;

    function f() {
        g.on("mouseover", a);
        b.on("mouseover", function(h) {
            h.stopPropagation()
        })
    }

    function a(j) {
        if (d !== -1) {
            b.eq(d).removeClass("cbp-hropen")
        }
        var i = $(j.currentTarget).parent("li"),
            h = i.index();
        if (d === h) {
            i.removeClass("cbp-hropen");
            d = -1
        } else {
            i.addClass("cbp-hropen");
            d = h;
            c.off("click").on("mouseover", e)
        }
        return false
    }

窗口尺寸是否可以确定是否应在单击下激活菜单-例如1024px?

0 个答案:

没有答案