Question

我写了一个函数来调整我网站上的菜单块大小。然后我将函数设置为在正在加载的窗口和正在调整大小的窗口上执行。它与>>> s = ['a', 'a a', 'a b', 'ba', 'a b a'] >>> s.sort(cmp= lambda x,y: -cmp(x.count(' '), y.count(' ')) or cmp(x,y)) >>> s ['a b a', 'a a', 'a b', 'a', 'ba']一起按预期工作，但它对.load()完全没有任何影响。我可以看到它正在调用它的函数，因为它命中了警报，但它没有从函数中实际调整大小。

我知道该函数有效，因为如果刷新窗口，它会触发函数并调整菜单块的大小。我也知道正在到达.resize()和函数，因为它会在调整窗口大小时触发警报，但该函数实际上并没有调整div的大小。

我使用.resize()，.bind('resize', function () {})并使用$(window).onresize = changeWidth();进行了尝试，然后检查窗口大小是否已更改并且它们都具有相同的结果。

我的功能如下：

setInterval(function () {}, 300)

然后我使用function changeWidth() { alert('resized'); var widestBlock = 0; $('.menu-block').each(function() { if ($(this).width() > widestBlock) { widestBlock = $(this).width(); } }); $('.menu-block').each(function() { $(this).width(widestBlock); }); }和.load()

触发该功能

.resize()

Answer 1

更新：制作菜单组件

我们需要一个菜单，其中的项目具有相同的宽度，根据最宽的项目或窗口宽度计算。

function MenuCtrl($) {
  var self = this;

  // set it to true if you want to calculate on the available width      
  self.basedOnWindowWidth = false;

  self.selector = '#resizableMenu';
  self.menu = $(self.selector);
  self.meta = null;
  
  self.updateItemsWidth = function() {
    var id = 'resizableMenuStyle';
    var style = $('#' + id);
    
    if(style.length < 1) {
      style = $('<style />', {
        id: id
      }).appendTo('head');
    }
    
    style.html(self.selector + ' a { width: '+ self.meta.maxWidth +'px; }');
    return self;
  };
  
  self.study = function studyMenu() {
    var res = {
      itemsCount: 0,
      maxWidth: 0,
      width: 0,
      height: 0
    };
    
    var items = self.menu.find('> li');
    
    res.itemsCount = items.length;
    res.width = self.menu.outerWidth();
    res.height = self.menu.outerHeight();
    
    if(self.basedOnWindowWidth) {
      res.maxWidth = window.innerWidth;
    } else {
      items.each(function(index, item) {
        width = $(item).width();
      
        (res.maxWidth > width) || (res.maxWidth = width);
      });
    }
      

    self.meta = res;
    return self;
  };
  
  self.study().updateItemsWidth();
  
  var semaphore;
  $(window).resize(function(event) {
    window.clearTimeout(semaphore);
    
    semaphore = window.setTimeout(function() {
      return $
        .when(console.count('Window Resize End'))
        .then(function() {
          return self.study();
        })
        .then(function() {
          return console.log('menu metadata after resizing', self.meta);
        })
        .then(function() {
          self.updateItemsWidth();
        })
      ;
    }, 200);
  });
}

jQuery(document).ready(MenuCtrl);

*, *:after, *:before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
html, body, .nav {
  padding: 0;
  margin: 0;
  max-width: 100%;
}

.nav {
  list-style: none;
  display: inline-block;

  background: red;
}

.nav a {
  display: inline-block;
  padding: .5em 1.5em;
  background: yellow;
  
  transition: 400ms width linear;
}
.nav li {
  margin: .5em 0;
  max-width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="resizableMenu" class="nav nav-resizable">
  <li><a href="#">1 - lorem</a></li>
  <li><a href="#">2 - lorem</a></li>
  <li><a href="#">3 - lorem</a></li>
  <li><a href="#">4 - lorem</a></li>
  <li><a href="#">5 - lorem</a></li>
  <li><a href="#">6 - lorem</a></li>
  <li><a href="#">7 - lorem</a></li>
  <li><a href="#">8 - lorem</a></li>
  <li><a href="#">9 - lorem</a></li>
  <li><a href="#">10 - lorem</a></li>
  <li><a href="#">11 - lorem</a></li>
  <li><a href="#">12 - lorem</a></li>
  <li><a href="#">13 - lorem</a></li>
  <li><a href="#">14 - lorem</a></li>
  <li><a href="#">15 - lorem Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</a></li>
  <li><a href="#">16 - lorem</a></li>
  <li><a href="#">17 - lorem</a></li>
  <li><a href="#">18 - lorem</a></li>
  <li><a href="#">19 - lorem</a></li>
  <li><a href="#">20 - lorem Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</a></li>
  <li><a href="#">21 - lorem</a></li>
  <li><a href="#">22 - lorem</a></li>
  <li><a href="#">23 - lorem</a></li>
</ul>

尝试在resizeEnd事件上执行你的fn！

function resizeView() {
  // do what you want
  console.count('Called resizeView');

}

var semaphore;
jQuery(window).load(resizeView).resize(function(event) {
  window.clearTimeout(semaphore);
  
  semaphore = window.setTimeout(resizeView, 200);
};

Answer 2

按照你开始的方式你可以尝试这样做：

function changeWidth() {
  var widestBlock = 0;
  $('.menu-block').each(function() {
    if ($(this).width() > widestBlock) {
      widestBlock = $(this).width();
      console.log(widestBlock)
    }
  });

  $('.menu-block').each(function() {
    $(this).width(widestBlock);
  });
}


$(window).load(function(){
  changeWidth();
})

$(document).ready(function(){
    $(window).resize(function() {
      changeWidth();

    });
});

jQuery .resize（）不会触发函数

2 个答案: