按钮：根据可用空间动态调整大小

debugcn 发表于 Dev

萨加拉吉

所以要求是，这里的选项卡或向导必须默认显示全名，非活动的必须根据右侧的可用空间缩小。知道我们如何实现这一目标吗？

默认情况下，按钮的宽度为：自动。但是当没有。按钮更多，当右边的空间开始减少时，不活动的按钮必须缩小。

纳科加

我想你看起来像这样：

//Number of elemnts
let count = $('li').length;

//Width of each element
let width = 100 / count;
$('li').css('width', width + '%');

//Width of elements container (ul)
let ulWidth = parseFloat($("ul").css("width"));


for (let i = 0; i< count; i++) {

  $($('li')[i]).click(function() {
  
  	//Reset elements width
    $('li').css('width', 'auto');

    //Add active class to clicked element
    $('li').removeClass('active');
    $($('li')[i]).addClass('active');
    
    if ( $('li').hasClass('active') ) {
    
    	//Width of active element
      let activeWidth = parseFloat($("li.active").css("width"));
      let activeWidthPerc = (activeWidth * 100) / ulWidth;

      //Width of the rest of the elements
      let generalWidth = (100 - activeWidthPerc) / (count - 1);
      
      //Will only adapt when the active element is smaller than the rest of the elements
      if (activeWidthPerc < generalWidth) {
        
        $('li').css('width', width + '%');
        
      } else {
        
        $('li').css('width', generalWidth + '%'); //Set width to rest of the elements
        $('li.active').css('width', activeWidthPerc + '%'); //Set width to active element
        
      }
    
    }

  });

}

@import url("https://fonts.googleapis.com/icon?family=Material+Icons");

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box; 
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

nav {
  width: 80%;
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
  -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
}

ul {
  width: 100%;
}

li {
  list-style: none;
  float: left;
  padding: 10px;
  text-align: center;
  background: #EEEEEE;
  cursor: pointer;
  color: #777;
  border-right: 1px solid #999;
  display: flex;
  align-items: center;
  justify-content: center;
}

li:last-child {
  border-right: none;
}

p {
  font-size: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

i {
  vertical-align: bottom;
  margin-right: 5px;
}

.active {
  background: #3C8CBD;
  color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <nav>
    <ul>
      <!--Try to add more li elements-->
      <li>
        <i class="material-icons">home</i><p>Home</p>
      </li>
      <li>
        <i class="material-icons">airplanemode_active</i><p>Plane</p>
      </li>
      <li>
        <i class="material-icons">directions_car</i><p>Car</p>
      </li>
      <li>
        <i class="material-icons">people</i><p>People</p>
      </li>
    </ul>
  </nav>
</body>

你可以在这里找到一个完整的例子https://codepen.io/Nacorga/pen/MqaLGK

我希望它可以帮助你;)

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。