css - 最大高度转换』不起作用？

Question

1. 我想使用纯 CSS 制作类似 Bootstrap 的折叠面板 bootstrap collapse panel

2. 但是最大高度转换不起作用，为什么？

3. 如果我勾选了如何切换面板，我想在双击时折叠面板

  * {
    padding: 0;
    margin: 0;
  }
  
  .content {
    width: 400px;
    height: 300px;
    background: #ccc;
    margin:40px auto;
    border:1px solid #eee;
  }
  label{
  	padding:10px;
  }
  .content>div{
  	width:100%;
  	transition: all ease 1s;
  }
  p{
    word-break: break-word;
    height: 0%;
    overflow: hidden;
    max-height: 0;
    transition: max-height ease 1s;
  }
  input[type=radio]{
  	transition: all ease 1s;
  	-webkit-appearance:none;
  }

  label:hover+input+p{
	max-height: 100%;
  }

<div class="content">
    <div>
      <label for="demo1">demo1</label>
      <input type="radio" name='demo' id='demo1'>
      <p>dsfjhbklweji;dfsfjhbk lwedsfjhbklweji;df sfjhbklweji;dfovjji;dfovj</p>
    </div>
    <div>
      <label for="demo2">demo2</label>
      <input type="radio" name='demo' id='demo2'>
      <p>ewrsds fjhbk lweji;dfsfjh bklwedsfjhbkl weji;dfs fjhb klweji;df ovj ji  ;dfokj</p>
    </div>
    <div>
      <label for="demo3">demo3</label>
      <input type="radio" name='demo' id='demo3'>
      <p>sdjkassfjhbklweji;dfsfjhbklwedsfjhbklweji;dfsfjhbklweji;dfovjji;dfodlnjk</p>
    </div>

link in JSfidle

Answer 1

在每次 radio:checked 时，您可以将 transition 给 p tag 用于 opacity 和 高度，如下，

(plus + selector) - selects all independent elements that are placed after input element here, like here p is placed after input.

The max-height property is used to set the maximum height of an element. It prevents the used value of the height property from becoming larger than the value specified for max-height.

.content{
  width:400px;
  height:400px;
  border:1px solid #ccc;
  margin:auto;
}
p{
  height:0px;
  opacity:0;
  word-break:break-word;
  transition:all 0.6s ease;
}
input[type="radio"]{
  -webkit-appearance:none;
}
input[type="radio"]:checked + p{
  height:50px;
  opacity:1;
}

<div class="content">
    <div>
      <label for="demo1">demo1</label>
      <input type="radio" name='demo' id='demo1'>
      <p>dsfjhbklweji;dfsfjhbk lwedsfjhbklweji;df sfjhbklweji;dfovjji;dfovj</p>
    </div>    
    <div>
      <label for="demo2">demo2</label>
      <input type="radio" name='demo' id='demo2'>
      <p>ewrsds fjhbk lweji;dfsfjh bklwedsfjhbkl weji;dfs fjhb klweji;df ovj ji  ;dfokj</p>
    </div>
    
    <div>
      <label for="demo3">demo3</label>
      <input type="radio" name='demo' id='demo3'>  <p>sdjkassfjhbklweji;dfsfjhbklwedsfjhbklweji;dfsfjhbklweji;dfovjji;dfodlnjk</p>
    </div>