Question

我想使用纯CSS make make collape面板，如Bootstrap bootstrap collapse panel
但是最大高度过渡不起作用，为什么？
如果我选中了如何切换面板，我想在双击时面板崩溃

＆＃13;

  * {
    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%;
  }

＆＃13;

<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>

＆＃13;

link in JSfidle

Answer 1

每次radio:checked，您都可以transition p tag opacity 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; }，如下所示

（加+选择器） - 选择放在输入元素之后的所有独立元素，就像输入后放置p一样。

max-height属性用于设置最大高度   元件。它可以防止高度属性的使用值   变得大于为max-height指定的值。

＆＃13;

<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>

＆＃13;

{{1}}

＆＃13;

最大高度过渡不起作用？

1 个答案: