javascript - 在可调整大小的导航栏上显示/隐藏按钮

Question

我有一个导航栏，行中带有按钮链接，用于将窗口大小调整为更小的宽度，每个按钮都包裹在其下方，更改导航高度，从导航中删除并附加到下拉菜单中。

当导航高度高于 80 时，我设法附加包装按钮，但只有当屏幕的初始尺寸很大(所有按钮都排在一行中)时，它才会起作用。但如果屏幕以较小的宽度开始，它不会在菜单中附加所有包裹的按钮。

这是我的尝试

$(window).resize(function() {
  var navbar = $("#navbar");
  var list = $("#list");
  var btns = $("#btns");
  var last_element;
  for (var i = 0; i < list.children().length; i++) {
    setTimeout(function() {
      if (list.height() > 80) {
        last_element = list.children().last();
        setTimeout(function() {
          $("#btns .dropdown-menu").prepend(last_element);
        }, 300);
        last_element.remove();
      }
    }, 500);

  }
});

#navbar {
  width: fit-content;
  background-color: #dbdbdb;
  box-shadow: 2px 2px 2px #999;
  border-radius: 10px;
  padding: 10px;
}

#list {
  margin: 0;
  padding: 0;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
}

.item {
  color: #333;
  font-size: 30px;
  font-weight: bold;
  background-color: #f5f5f5;
  /*    display: inline-block; */
  padding: 10px 30px;
  border-radius: 5px;
  box-shadow: 2px 2px 2px #888;
  margin: 4px 2px;
  list-style-type: none;
}

.dropdown-menu {
  width: 200px;
  padding: 0 20px;
}

<!-- bootstrap style -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />


<div id="navbar">
  <ul id="list">
    <li class="item">item 1</li>
    <li class="item">item 2</li>
    <li class="item">item 3</li>
    <li class="item">item 4</li>
    <li class="item">item 5</li>
    <li class="item">item 6</li>
    <li class="item">item 7</li>

  </ul>
  <div id="btns">
    <div class="dropdown">
      <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown button
         </button>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      </div>
    </div>
  </div>
</div>



<!-- scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

我很想对这张图片进行类似的操作，

有人可以提供片段建议或者我应该使用什么来实现此类操作？

Answer 1

更新 - 将隐藏元素移至下拉菜单

<小时/>

首先，对CSS进行更改:

1. 将 display: flex 应用于 #navbar。

2. 手动计算#list的最大高度，并为其设置max-height和overflow:hidden属性。在这种情况下，#list 的最大高度将为 73px，但不是 80px。 (.item 65px 的高度 + .item 4px 的上边距 + 的下边距。 item 4px = 73px) 如果 max-height 不正确，#list 可能不会隐藏 .item 正确。

3. 为.items设置display: inline-block。

`

#navbar{
   width: fit-content;
   background-color: #dbdbdb;
   box-shadow: 2px 2px 2px #999;
   border-radius: 10px;
   padding: 10px;

   /*Flex layout*/
   display:flex;
   flex-direction:row;
   align-items:center;
}

#list{
   margin: 0;
   padding: 0;

   /*Calculate the max-height and set overflow hidden*/
   overflow:hidden;
   max-height:73px;
}

.item{
   color: #333;
   font-size: 30px;
   font-weight: bold;
   background-color: #f5f5f5;
   display: inline-block;
   padding: 10px 30px;
   border-radius: 5px;
   box-shadow: 2px 2px 2px #888;
   margin: 4px 2px;
   list-style-type: none;

   /*Move text-align center to here*/
   text-align: center;

   /*Remove flex layout & add display inline-block*/
   display: inline-block;

}

.dropdown-menu{
   width: 200px;
   padding: 0 20px;
}

`

然后，更新 $(window).resize() 函数。下面的代码将检查该元素是否被移动到隐藏区域。此外，使用.html()刷新下拉菜单。

let list = $("#list");
let listItems = $("#list .item");
let dropdownMenu = $("#btns .dropdown-menu");

$(window).resize(function() {
    let listPosition = list.position().top;
    let hiddenItems = listItems.filter(function(){
    return $(this).position().top - listPosition > 0;
  }).clone();
    dropdownMenu.html(hiddenItems);
});