如何在 flexbox 中按比例分配可折叠项目答案

【问题标题】：How to proportion collapsible items in a flexbox如何在 flexbox 中按比例分配可折叠项目
【发布时间】：2021-10-06 05:08:59
【问题描述】：

我有一个使用 flexbox 构建的 3 面板页面。它看起来像这样：

如果我展开第二部分，第一部分会折叠起来，看起来像这样：

这很好，但我希望它在第二部分打开时不会自动关闭第一部分。理想情况下，第一部分和第二部分的高度相同 (50/50)。

<ul>
  <li class="active">
    <div class="wrap">
      <a href="#">open1</a>
        <div>text 1</div>    
    </div>
  </li>
  <li>
    <div class="wrap">
      <a href="#">open2</a>
        <div>text 2</div>    
    </div>
  </li>
  <li>
    <div class="wrap">
      <a href="#">open3</a>
      <div>text 3</div>
    </div>
  </li>
</ul>

* {
  box-sizing: border-box;
}
html, body {
  height: 100%;
  margin: 0;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  height: 100%;
  flex-direction: column;
}

ul li {
  background:gray;
  padding:10px 30px;
  border-top: 2px solid #fff0ed;
}
ul li:first-child{
  border-top: none;
}

ul a {
  background: green;
  display: block;
  padding: 5px;
}

ul .wrap {
  background: #000;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100%;
  color: #fff;
}

ul .wrap div {
  display: none;
  padding: 20px;
}

ul li.active {
  display: flex;
  flex: 1 1 auto;
}

ul li.active .wrap div {
  display: block;
}

我怎样才能做到这一点？

CODEPEN here

【问题讨论】：

标签： javascript html css flexbox

【解决方案1】：

您可以使用toggleClass，如果单击的元素已经存在，则会删除该元素上的类，否则将添加该类。

$('li').on('click', function() {
  $(this).toggleClass('active')
})

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  height: 100%;
  flex-direction: column;
}

ul li {
  background: gray;
  padding: 10px 30px;
  border-top: 2px solid #fff0ed;
}

ul li:first-child {
  border-top: none;
}

ul a {
  background: green;
  display: block;
  padding: 5px;
}

ul .wrap {
  background: #000;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100%;
  color: #fff;
}

ul .wrap div {
  display: none;
  padding: 20px;
}

ul li.active {
  display: flex;
  flex: 1 1 auto;
}

ul li.active .wrap div {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="active">
    <div class="wrap">
      <a href="#">open1</a>
      <div>text 1</div>
    </div>
  </li>
  <li>
    <div class="wrap">
      <a href="#">open2</a>
      <div>text 2</div>
    </div>
  </li>
  <li>
    <div class="wrap">
      <a href="#">open3</a>
      <div>text 3</div>
    </div>
  </li>
</ul>

【讨论】：

【解决方案2】：

您可以使用 Javascript 控制它：

$('li').each(function(){
  var $this = $(this);
  
  $this.on('click', function(){
    if ($this.hasClass('active')) $this.removeClass('active');
    else $this.addClass('active');
  });
});

更短：

 $('li').each(function(){
  var $this = $(this);
  
  $this.on('click', function(){
    $this[$this.hasClass('active') ? 'removeClass' : 'addClass' ]('active');
  });
});

【讨论】：