Question

我下载this plugin并在我的wordpress主题中使用它，我将宽度设置为200px但是当我悬停菜单宽度时延迟200px。我不想延迟看到它。

Jquery的

(function (e, c, a, g) {
    var d = "slimmenu",
        f = {
            resizeWidth: "768",
            collapserTitle: "Main Menu",
            animSpeed: "0",
            easingEffect: null,
            indentChildren: false,
            childrenIndenter: "&nbsp;&nbsp;"
        };

    function b(i, h) {
        this.element = i;
        this.$elem = e(this.element);
        this.options = e.extend({}, f, h);
        this.init()
    }
    b.prototype = {
        init: function () {
            var h = this.options,
                j = this.$elem,
                i = '<div class="menu-collapser">' + h.collapserTitle + '<div class="collapse-button"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></div></div>',
                k;
            j.before(i);
            k = j.prev(".menu-collapser");
            j.on("click", ".sub-collapser", function (m) {
                m.preventDefault();
                m.stopPropagation();
                var l = e(this).closest("li");
                if (e(this).hasClass("expanded")) {
                    e(this).removeClass("expanded");
                    e(this).find("i").html("&#43;");
                    l.find(">ul").slideUp(h.animSpeed, h.easingEffect)
                } else {
                    e(this).addClass("expanded");
                    e(this).find("i").html("&#45;");
                    l.find(">ul").slideDown(h.animSpeed, h.easingEffect)
                }
            });
            k.on("click", ".collapse-button", function (l) {
                l.preventDefault();
                j.slideToggle(h.animSpeed, h.easingEffect)
            });
            this.resizeMenu({
                data: {
                    el: this.element,
                    options: this.options
                }
            });
            e(c).on("resize", {
                el: this.element,
                options: this.options
            }, this.resizeMenu)
        },
        resizeMenu: function (k) {
            var l = e(c),
                h = k.data.options,
                i = e(k.data.el),
                j = e("body").find(".menu-collapser");
            i.find("li").each(function () {
                if (e(this).has("ul").length) {
                    if (e(this).has(".sub-collapser").length) {
                        e(this).children(".sub-collapser i").html("&#43;")
                    } else {
                        e(this).append('<span class="sub-collapser"><i>&#43;</i></span>')
                    }
                }
                e(this).children("ul").hide();
                e(this).find(".sub-collapser").removeClass("expanded").children("i").html("&#43;")
            });
            if (h.resizeWidth >= l.width()) {
                if (h.indentChildren) {
                    i.find("ul").each(function () {
                        var m = e(this).parents("ul").length;
                        if (!e(this).children("li").children("a").has("i").length) {
                            e(this).children("li").children("a").prepend(b.prototype.indent(m, h))
                        }
                    })
                }
                i.find("li").has("ul").off("mouseenter mouseleave");
                i.addClass("collapsed").hide();
                j.show()
            } else {
                i.find("li").has("ul").on("mouseenter", function () {
                    e(this).find(">ul").stop().slideDown(h.animSpeed, h.easingEffect)
                }).on("mouseleave", function () {
                    e(this).find(">ul").stop().slideUp(h.animSpeed, h.easingEffect)
                });
                i.find("li > a > i").remove();
                i.removeClass("collapsed").show();
                j.hide()
            }
        },
        indent: function (k, j) {
            var h = "";
            for (var l = 0; l < k; l++) {
                h += j.childrenIndenter
            }
            return "<i>" + h + "</i>"
        }
    };
    e.fn[d] = function (h) {
        return this.each(function () {
            if (!e.data(this, "plugin_" + d)) {
                e.data(this, "plugin_" + d, new b(this, h))
            }
        })
    }
})(jQuery, window, document);

如果您需要更多详细信息，请告诉我

Answer 1

使用CSS可以很容易地做到这一点，你不会得到延迟，所有你需要的就是这个

 div
 {
 width: 100px;
 }

 div:hover
 {
 width: 200px;
 }

我使用100px到200px，因为你解释说它从200px变为200px并且看不到任何变化，从100到200你可以测试它以确保没有延迟

Answer 2

Standart ul的宽度为100％。您将li（ul的子项）的宽度设置为200px。如果ul元素的父级不是200px，您将获得此效果。现在你得到这个，因为子元素（li）比父元素（ul）宽。

你编辑了这个css：

ul.slimmenu li ul li {
    background: none repeat scroll 0 0 #2D2D2D;
    border-bottom: 0.3mm solid #232323;
    transition: all 0.3s ease 0s;
    width: 200px;
}

但你必须这样做：

ul.slimmenu li > ul {
    display: none;
    left: 0;
    position: absolute;
    top: 100%;
    width: 200px; <------ note this
    z-index: 999;
}

不要忘记删除ul.slimmenu li ul li { width: 200px; }

您编辑了子元素css，但您必须编辑父元素css。

在菜单导航中延迟增加宽度

2 个答案: