jquery - 如果子元素的总和超过父元素的宽度，则将类应用于子元素

Question

我正在尝试创建一个限制为一行的响应式菜单。当屏幕宽度变小时，任何不完全适合该行的菜单项都需要放入固定在菜单右侧的“更多”菜单项中。我通常只使用 CSS 媒体查询来执行此操作，但鉴于菜单项的数量是动态的，因此很难使用媒体查询。

我最初的想法是动态地为它们分配一个类，这样分配的类将不显示任何内容，并且当按下“更多”按钮时，它将显示隐藏的元素。

到目前为止，我已经做到了这一点：

      var parentWidth = $('nav').width();

      var childrenWidth=0;
        $('.menu-bar li').each( function(){ cWidth += $(this).width(); });

      while (childrenWidth > parentWidth) {               

            $($(".menu-bar li").get().reverse()).each(function() { 
                $(this).addClass('hidden-item');
             });                  
      };

这显然不起作用，任何帮助将不胜感激。

如果有人知道一个很棒的 CSS 方法来做到这一点，我很想听听，我一直在绞尽脑汁想弄清楚。

谢谢