jquery - 子の合計が親の幅を超える場合、クラスを子要素に適用する

Question

1 行に制限されたレスポンシブ メニューを作成しようとしています。画面の幅が小さくなると、行に完全に収まらないメニュー項目は、メニューの右側に固定されている「その他」メニュー項目にドロップする必要があります。通常は 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 の方法を知っているなら、ぜひ聞きたいです。私はそれを理解しようと頭を悩ませてきました。

ありがとう