flybird99 2017-07-04 08:03 采纳率: 100%
浏览 1260
已采纳

修改一个js菜单的二三级点击后停留所在位置问题

js文件代码如下,我不会,请帮忙修改,预览地址:http://www.html5tricks.com/demo/jquery-3d-menu-with-search/index.html

(function($, window, document, undefined) {
var pluginName = "jqueryAccordionMenu";
var defaults = {
speed: 300,
showDelay: 0,
hideDelay: 0,
singleOpen: true,
clickEffect: true
};
function Plugin(element, options) {
this.element = element;
this.settings = $.extend({},
defaults, options);
this._defaults = defaults;
this._name = pluginName;
this.init()
};
$.extend(Plugin.prototype, {
init: function() {
this.openSubmenu();
this.submenuIndicators();
if (defaults.clickEffect) {
this.addClickEffect()
}
},
openSubmenu: function() {
$(this.element).children("ul").find("li").bind("click touchstart",
function(e) {
e.stopPropagation();
e.preventDefault();
if ($(this).children(".submenu").length > 0) {
if ($(this).children(".submenu").css("display") == "none") {
$(this).children(".submenu").delay(defaults.showDelay).slideDown(defaults.speed);
$(this).children(".submenu").siblings("a").addClass("submenu-indicator-minus");
if (defaults.singleOpen) {
$(this).siblings().children(".submenu").slideUp(defaults.speed);
$(this).siblings().children(".submenu").siblings("a").removeClass("submenu-indicator-minus")
}
return false
} else {
$(this).children(".submenu").delay(defaults.hideDelay).slideUp(defaults.speed)
}
if ($(this).children(".submenu").siblings("a").hasClass("submenu-indicator-minus")) {
$(this).children(".submenu").siblings("a").removeClass("submenu-indicator-minus")
}
}
window.location.href = $(this).children("a").attr("href")

        })
    },
    submenuIndicators: function() {
        if ($(this.element).find(".submenu").length > 0) {
            $(this.element).find(".submenu").siblings("a").append("<span class='submenu-indicator'>+</span>")
        }
    },
    addClickEffect: function() {
        var ink, d, x, y;
        $(this.element).find("a").bind("click touchstart",

        function(e) {
            $(".ink").remove();
            if ($(this).children(".ink").length === 0) {
                $(this).prepend("<span class='ink'></span>")
            }
            ink = $(this).find(".ink");
            ink.removeClass("animate-ink");
            if (!ink.height() && !ink.width()) {
                d = Math.max($(this).outerWidth(), $(this).outerHeight());
                ink.css({
                    height: d,
                    width: d
                })
            }
            x = e.pageX - $(this).offset().left - ink.width() / 2;
            y = e.pageY - $(this).offset().top - ink.height() / 2;
            ink.css({
                top: y + 'px',
                left: x + 'px'
            }).addClass("animate-ink")
        })
    }
});
$.fn[pluginName] = function(options) {
    this.each(function() {
        if (!$.data(this, "plugin_" + pluginName)) {
            $.data(this, "plugin_" + pluginName, new Plugin(this, options))
        }
    });
    return this
}

})(jQuery, window, document);

修改效果是点击某子菜单后,此菜单保留点击时样式,而不是随鼠标移走而恢复A:link样式。
图片说明
如需要查看css文件,可问我

  • 写回答

3条回答 默认 最新

  • 张大教主 2017-07-04 08:52
    关注
     很好解决,我本地已经测试只需要在 filterList函数末尾处,添加以下我写的代码,就ok了
     $("li>a").click(function(){
            $("li>a").css("border-left",'solid 8px transparent');
         $(this).css("border-left",'solid 8px #ED5565');
        })
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

悬赏问题

  • ¥100 嵌入式系统基于PIC16F882和热敏电阻的数字温度计
  • ¥15 cmd cl 0x000007b
  • ¥20 BAPI_PR_CHANGE how to add account assignment information for service line
  • ¥500 火焰左右视图、视差(基于双目相机)
  • ¥100 set_link_state
  • ¥15 虚幻5 UE美术毛发渲染
  • ¥15 CVRP 图论 物流运输优化
  • ¥15 Tableau online 嵌入ppt失败
  • ¥100 支付宝网页转账系统不识别账号
  • ¥15 基于单片机的靶位控制系统