Question

我有一组正在显示的标签。当我使用@media查询时，我想将它们转换为下拉列表，当我需要使它们响应时。每组选项卡都显示自己的内容。

我尝试了很多来自stackoverflow的方法但没有一个适合我的情况。

 <ul class="resources__tab-controls">
            <li class="resources__tabs resources__all-tabs" onclick="openResources(event, 'entrepreneur')">
                <a href="#">
                    Entrepreneurship
                </a>
            </li>
            <li class="resources__tabs"  onclick="openResources(event, 'social')">
                <a href="#">
                    Social
                </a>
            </li>
            <li class="resources__tabs " onclick="openResources(event, 'technology')">
                <a>
                    Technology
                </a>
            </li>
            <li id="lastTab">
                <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
                    More <span class="caret"></span>
               </a>
              <ul class="dropdown-menu" id="collapsed">

               </ul>
           </li>
     </ul>

我尝试使用此逻辑将屏幕大小设置为下拉列表，但我陷入了无限循环。

 function autocollapse() {

    let tabs = $('.resources__tab-controls');
    let tabsHeight = tabs.innerHeight();

    if (tabsHeight >= 50) {
      while(tabsHeight > 50) {
        //console.log("new"+tabsHeight);

        let children = tabs.children('li:not(:last-child)');
        let count = children.size();
        $(children[count-1]).prependTo('#collapsed');

        tabsHeight = tabs.innerHeight();
      }
    }
    else {
        while(tabsHeight < 50 && (tabs.children('li').size()>0)) {

        let collapsed = $('#collapsed').children('li');
        let count = collapsed.size();
        $(collapsed[0]).insertBefore(tabs.children('li:last-child'));
        tabsHeight = tabs.innerHeight();
      }
      if (tabsHeight>50) { 
          autocollapse();
      }
    }

   };

   $(document).ready(function() {

        autocollapse(); // when document first loads

      $(window).on('resize', autocollapse); // when window is resized

  });

Answer 1

你的无限循环是由于以下块：

while(tabsHeight > 50) {
  let children = tabs.children('li:not(:last-child)');
  let count = children.size();
  $(children[count-1]).prependTo('#collapsed');
  tabsHeight = tabs.innerHeight();
}

由于没有剩余的列表项，children变为空列表会发生什么。这意味着tabsHeight不再发生变化并保持在50之上。

这里可以找到一种更简单的方法： https://css-tricks.com/convert-menu-to-dropdown/

如何使用jquery将标签转换为下拉列表？

1 个答案: