Question

我正在寻找一种方法来了解一个元素（菜单）是否可能适合窗口调整大小的另一个元素。我不知道有问题的元素的宽度（例如，它不是由CSS设置的）。

菜单内容是动态的，未知数据（语言）和计数（用户角色/权限）。

如果我的第一次加载碰巧有元素拟合，我可以提出的解决方案可以正常工作，因为我存储了初始宽度，但是如果元素不适合（例如减少的话）它不能很好地工作窗口大小）。所以我的问题是，我该如何处理这种升级？

示例HTML / CSS：
全屏查看代码段（“展开代码段”）。它在大约604像素处断开，响应式菜单以480px开始。

.header {
  font-family: Arial, sans-serif;
  overflow: hidden;
  background: blue;
}

.header__logo {
  float: left;
  width: 100px;
  height: 40px;
  background: #000;
  color: #fff;
  text-align: center;
  line-height: 40px;
}

.menu {
  float: left;
  list-style: none;
  padding: 0;
  margin: 0;
}

@media screen and (max-width: 480px) {
  .menu {
    display: none;
  }
}

.menu__item {
  padding: 0 10px;
  color: #fff;
  float: left;
  height: 40px;
  line-height: 40px;
}

.hamburger {
  display: none;
  float: right;
  font-size: 20px;
  text-align: center;
  width: 40px;
  height: 40px;
  line-height: 40px;
  color: #fff;
}

@media screen and (max-width: 480px) {
  .hamburger {
    display: block;
  }
}

<div class="header">
  <div class="header__logo">logo</div>
  <div class="hamburger">=</div>
  <ul class="menu">
    <li class="menu__item">item 1</li>
    <li class="menu__item">item 2</li>
    <li class="menu__item">item 3</li>
    <li class="menu__item">item 4</li>
    <li class="menu__item">item 5</li>
    <li class="menu__item">item 6</li>
    <li class="menu__item">item 7</li>
  </ul>
</div>

Answer 1

您可以使用媒体查询等fontawesome（还有其他选项）来显示/隐藏特定断点处的图标和文字。您可以调整屏幕大小以查找像素值。

如果你正在寻找一个JS示例来找出特定的宽度，那也可以这样做 - 但如果这可以通过CSS解决，为什么不呢！

merge

pull

Answer 2

所以我提出了一个非常好的解决方案。它受到Ridiculously Responsive Social Sharing Buttons

工作的启发

var Menu = (function() {
  // setup classes used
  var headerClass = 'header__wrapper';
  var elClass = 'main-nav';
  var itemsClass = 'main-nav__item';
  var smallClass = itemsClass + '--small';

  // setup jQuery elements
  var $header = $('.' + headerClass).not('.clone');

  // setup the clone used to make operations/checks
  var clone = '.clone.' + headerClass;

  // currently, only a set height is supported
  var originalHeight = 60;

  var stealth = function(el) {
    var $el = (el instanceof jQuery) ? el : $(el);

    $el.css({
      height: 'auto',
      // position absolute is needed to be out of the DOM structure,
      // while still having a testable height
      position: 'absolute',
      left: 0,
      right: 0,
      visibility: 'hidden'
    });
  }

  return {
    init() {
      Menu.reset();
      Menu.exec();
      Menu.bindEvents();
    },

    exec() {
      // create a clone if it doesn't exist
      if (!$(clone).length) {
        Menu.clone(clone);
      }

      // reset the menu to its largest form
      Menu.reset();

      // does it fit?
      if (Menu.checkFit()) {
        // it fits, use the clone data;
        Menu.replace();
      } else {
        // it didn't fit, so attempt to fit
        Menu.attemptToFit();
      }
    },

    reset() {
      $(clone).find('.' + itemsClass).removeClass(smallClass);
    },

    bindEvents() {
      $(window).resize(function() {
        Menu.exec();
      });

      $(window).focus(function() {
        Menu.exec();
      });
    },

    checkFit() {
      return $(clone).height() == originalHeight;
    },

    attemptToFit() {
      var itemsArr = $(clone).find('.' + itemsClass).sort(function(a, b) {
        // TODO: handle and make sure nodes without data-priority are handled by DOM order
        var a = $(a).attr('data-priority') || 0;
        var b = $(b).attr('data-priority') || 0;

        return b - a;
      });

      // count iterations that do not fit
      var noFit = 0;

      // cycle over items, attempting to fit
      itemsArr.each(function(i) {
        var item = itemsArr[i];

        $(item).addClass(smallClass);

        // exit the loop if it fits!
        if (Menu.checkFit()) {
          // it fits, exit the loop!

          return false;
        } else {
          // this attempt didn't fit, try the next done
          noFit++;
        }
      });

      // could we make it fit?
      if (noFit == itemsArr.length - 1) {
        // TODO: handle this scenario
        // couldn't make it fit :( handle it
      } else {
        // we were able to make it fit, replace the original with the clone content
        Menu.replace();
      }
    },

    clone(el) {
      $header.clone().addClass('clone').insertAfter($header);
      stealth(el);
    },

    replace() {
      var content = $(clone).clone().contents();

      // replace the content of the original with the clone
      $header.empty().append(content);
    }
  };

})();

Menu.init();

在CodePen上查看它：http://codepen.io/veksen/pen/ORAmVa

知道元素是否可能适合窗口大小调整的另一个元素

2 个答案: