jquery 实现多级下拉菜单

最新推荐文章于 2025-05-23 14:39:25 发布

原创最新推荐文章于 2025-05-23 14:39:25 发布 · 710 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #callback #delay #each

jquery 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种利用JavaScript实现动态网页菜单项自适应宽度的方法，通过检测父元素的宽度并分配给子元素，确保菜单在不同屏幕尺寸下布局合理。

$(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);

});