多个输入框折行，点击展开收起。原生

Fifi_Yu

已于 2023-03-03 16:29:14 修改

阅读量319

点赞数 1

分类专栏：三剑客文章标签： javascript 前端开发语言

于 2023-03-02 16:33:07 首次发布

本文链接：https://blog.csdn.net/Phoebe_helloworld/article/details/129303394

版权

三剑客专栏收录该内容

2 篇文章 1 订阅

订阅专栏

效果

效果展示

grid布局

使用grid布局排列输入框，最小200px，自动撑开容器
- 多个输入框
- 操作框
无论是一行还是多行，操作按钮均靠右，内容靠右，如果操作按钮比较宽，可以设置 grid-column-end 属性，由 -2 改为 -3

计算方法

名称	含义
wrapWidth	容器宽度
itemWidth	单个item的宽度
operateWidth	操作按钮需要的宽度
maxIndex	输入框可显示的最大索引
itemList	输入框列表

计算单行最多能显示多少个输入框，剩下的隐藏

//向下取整
var maxIndex = Math.floor((wrapWidth - operateWidth)/itemWidth) - 1

如果 wrapWidth 足够宽，那么就不需要 “展开/收起” 按钮

if(wrapWidth>(itemWidth*(itemList.length-1)+operateWidth)){
	//todo 隐藏展开/收起按钮
}

源码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .wrapper {
      display: grid;
      /* 每行个数根据容器宽度自动调整，最小宽度200px ,多余宽度平分撑满容器*/
      grid-template-columns: repeat(auto-fill,minmax(200px,1fr));
      grid-column-gap:10px;
      grid-row-gap:6px;
    }
    .wrapper div {
      color: olive;
      padding: 16px;
      border-radius: 8px;
      border: 1px solid olivedrab;
      background-color: lightsalmon;
    }
    .wrapper div.operate {
      /* 永远靠右侧 */
      grid-column: -1 / -2;
      /* 内容靠右 */
      justify-self: end;
    }
  </style>
</head>
<body>
  <div class="wrapper">
    <div class="item">One</div>
    <div class="item">Two</div>
    <div class="item">Three</div>
    <div class="item">Four</div>
    <div class="item">Five</div>
    <div class="item">Six</div>
    <div class="item">Seven</div>
    <div class="item">Eight</div>
    <div class="operate"><button id="control">展开</button>
      <button>搜索</button>
    </div>
  </div>
  <script>
    var itemList = document.querySelectorAll('.wrapper>.item')
    function hide() {
      var wrapWidth = document.querySelector('.wrapper').clientWidth;
      var itemWidth =itemList[0].clientWidth
      var operateWidth = document.querySelector('.wrapper .operate').clientWidth
      var control = document.querySelector('#control')
      if (wrapWidth>(itemWidth*(itemList.length)+operateWidth)) {//不需要展开
        control.style.display = 'none'
      } else {
        var maxIndex = Math.floor((wrapWidth - operateWidth)/itemWidth) - 1
        // console.log(wrapWidth,maxIndex,itemWidth);
        for (let index = 0; index < itemList.length; index++) {
          if (index>maxIndex) {
            itemList[index].style.display = 'none'
          } else {
            
            itemList[index].style.display = 'block'
          }
        }
      }
    }
    hide()
    function showAll() {
      for (let index = 0; index < itemList.length; index++) {
        itemList[index].style.display = 'block'
      }
    }
    var control =  document.querySelector('#control')
    var clickNum = 1
    control.addEventListener('click',() => {
      clickNum++;
      if (clickNum%2==0) {
        control.innerText = '收起'
        showAll()
      } else {
        control.innerText = '展开'
        hide()
      }
    })
    window.addEventListener('resize',() => {
      // console.log(clickNum);
      if (clickNum%2!=0) {
        hide()
      }
    })
  </script>
</body>
</html>