jquery 实现多级下拉菜单

梦里梦外; 2022-06-14 08:52 533阅读 0赞

$(document).ready(function() \{  
  
  
function megaHoverOver()\{  
$(this).find(".sub").stop().fadeTo('fast', 1).show();  
  
//Calc\#bhate width of all \#bh's  
(function($) \{  
jQuery.fn.calcSubWidth = function() \{  
rowWidth = 0;  
//Calc\#bhate row  
$(this).find("ul").each(function() \{  
rowWidth = $(this).width();  
\});  
\};  
\})(jQuery);  
  
if ( $(this).find(".row").length > 0 ) \{ //If row exists...  
var biggestRow = 0;  
//Calculate each row  
$(this).find(".row").each(function() \{  
$(this).calcSubWidth();  
//Find biggest row  
if(rowWidth > biggestRow) \{  
biggestRow = rowWidth;  
\}  
\});  
//Set width  
$(this).find(".sub").css(\{'width' :biggestRow\});  
$(this).find(".row:last").css(\{'margin':'0'\});  
  
\} else \{ //If row does not exist...  
  
$(this).calcSubWidth();  
//Set Width  
$(this).find(".sub").css(\{'width' : rowWidth\});  
  
\}  
\}  
  
function megaHoverOut()\{  
$(this).find(".sub").stop().fadeTo('fast', 0, function() \{  
$(this).hide();  
\});  
\}  
  
  
var config = \{  
sensitivity: 2, // number = sensitivity threshold (must be 1 or higher)  
interval: 100, // number = milliseconds for onMouseOver polling interval  
over: megaHoverOver, // function = onMouseOver callback (REQUIRED)  
timeout: 200, // number = milliseconds delay before onMouseOut  
out: megaHoverOut // function = onMouseOut callback (REQUIRED)  
\};  
  
$("\#bh-m-xf-menu1topnav li .sub").css(\{'opacity':'0'\});  
$("\#bh-m-xf-menu1topnav li").hoverIntent(config);  
  
  
  
\});

发表评论取消回复

表情：

评论列表（有 0 条评论，533人围观）

还没有评论，来说两句吧...

相关阅读

相关 38个 css 和 jQuery 多级下拉菜单解决方案

38个 css 和 jQuery 多级下拉菜单解决方案参考文章： [（1）38个 css 和 jQuery 多级下拉菜单解决方案][1_38_ css _ jQuery]

绝地灬酷狼/ 2022年09月16日 15:21/ 0 赞/ 159 阅读

相关 38 jQuery和CSS多级下拉菜单解决方案（一）

38 jQuery和CSS多级下拉菜单解决方案（一）参考文章： [（1）38 jQuery和CSS多级下拉菜单解决方案（一）][1_38 jQuery_CSS] （2）

我会带着你远行/ 2022年09月10日 00:08/ 0 赞/ 245 阅读

相关 android--多级下拉列表菜单的实现

原文链接：[http://blog.csdn.net/minimicall/article/details/39484493][http_blog.csdn.net_minim

ゝ一纸荒年。/ 2022年08月12日 16:08/ 0 赞/ 329 阅读

相关 jQuery左侧带小图标的多级下拉菜单

今天我们要来分享一款很不错的jQuery左侧带小图标的多级下拉菜单，菜单是垂直的，每一个菜单项带有一个小图标，看起来非常专业。并且菜单支持无限极下拉，所以对各位Web开发者来说

骑猪看日落/ 2022年08月07日 13:57/ 0 赞/ 215 阅读

相关 jquery 实现多级下拉菜单

$(document).ready(function() \{ function megaHoverOver()\{ $(this).find(".sub"

梦里梦外;/ 2022年06月14日 08:52/ 0 赞/ 534 阅读

相关 jQuery实战_下拉菜单的实现

mouseover事件和mouseenter 事件的区别 mouseover事件会触发多次，每遇到一个子元素就会触发一次。 mouseenter 事件只会触发一次。鼠标

深碍√TFBOYSˉ_/ 2022年05月22日 12:39/ 0 赞/ 265 阅读

相关 JS--jQuery实现的多级下拉菜单效果代码

这篇文章主要介绍了jQuery实现的多级下拉菜单效果代码,涉及jquery鼠标事件及页面元素的显示与隐藏效果实现技巧,非常具有实用价值,需要的朋友可以参考下: 本文实例讲述

冷不防/ 2022年05月13日 18:17/ 0 赞/ 317 阅读

相关 jQuery实现下拉菜单功能

注意要引入正确的jQuery文件 <!DOCTYPE html> <html> <head> <title>下拉式菜单</title>

清疚/ 2022年04月02日 03:39/ 0 赞/ 391 阅读

相关 BootStrap 下拉多级菜单

<!DOCTYPE HTML> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <t

野性酷女/ 2021年12月05日 16:54/ 0 赞/ 449 阅读

相关网页下拉菜单-jQuery实现-案例

效果展示： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9n

- 日理万妓/ 2021年06月22日 15:36/ 0 赞/ 566 阅读