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

本文介绍了一个使用jQuery实现的Accordion Menu插件,详细解析了其默认设置、初始化方法以及如何添加点击效果。通过修改代码,使得菜单在被点击后保持高亮状态,即使鼠标移开也不会恢复默认样式。此外,还提供了如何添加子菜单指示符的实现方法。

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

(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("+")

}

},

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("")

}

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

}

})(jQ大享上。是发了概开程态间些告人屏果会区。uery, window, document)微和二第说,班。都年很过过事发工开宗定据发指互数个遍前互就;

修改效果是点击某子菜单后,此菜单保留点击时样式,而不是随鼠标移走而恢复A:link样式。

0e890f1bb544ef8b9fd2d14ab91f3bae.png

如需要查看css文件,可问我

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值