Question

我有这种手风琴，我在网上找到了。我重新设计并添加了幻灯片效果。我有一个小问题，而height 100px;我尝试将其值更改为auto，因此无论文本中包含多少文本，它都适合。这样做是因为它做了我想做的事情，但它也删除了我仍然想要的幻灯片效果。如何正确设置height值以使文本适合我仍然可以保留幻灯片动画？

Here is what I have

＆＃13;

body {
  background:#d0d0d5;
}
/*  Basic stucture
=====================*/
#accordion { 
  margin: 100px auto;
  width: 400px;
}
#accordion ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.accordion {
  -webkit-transition: all 150ms ease-in-out;
  transition: all 150ms ease-in-out; 
  height: 0px;
  overflow: none; 
  line-height: 1.3em; 
  overflow: hidden;
}
.accordion:target {
  -webkit-transition: all 150ms ease-in-out; 
  transition: all 150ms ease-in-out; 
  height: 100px;
}
#accordion ul li a {
  text-decoration:none;
  display:block;
  padding:10px;
}
.accordion{
  padding:0px;
}
/*  Colors 
====================*/
#accordion ul{
  -webkit-box-shadow:0 4px 10px #3f3f3f;
  -moz-box-shadow:0 4px 10px #3f3f3f;
  box-shadow:0 4px 10px #3f3f3f;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
}
#accordion ul li a {
  background: #2B2D30;
  border-bottom:1px solid orange;
  color: white;
}
.accordion {
  -webkit-transition: all 800ms ease-in-out; 
  transition: all 800ms ease-in-out;
  height: 0px;
  background:#fdfdfd;
  color:#999;
}
.accordion:target {
  border-top:3px solid #ffbf87;
}

＆＃13;

<div id="accordion">
  <ul>
    <li>
      <a href="#one" >Q. test</a>
      <div id="one" class="accordion">
        test text
      </div>
    </li>
    <li>
      <a href="#two">Q. another tester</a>
      <div id="two" class="accordion">
        here is another text
      </div>
    </li>    
    <li>
      <a href="#three">Q. I keep getting errors what do I do?</a>
      <div id="three" class="accordion">
        Take a look at <b>this page</b> to find the most common errors and a how to resolve them.
        Take a look at <b>this page</b> to find the most common errors and a how to resolve them.
        Take a look at <b>this page</b> to find the most common errors and a how to resolve them.
        Take a look at <b>this page</b> to find the most common errors and a how to resolve them.
        Take a look at <b>this page</b> to find the most common errors and a how to resolve them.
        Take a look at <b>this page</b> to find the most common errors and a how to resolve them.
      </div>
    </li>
  </ul>
</div>

＆＃13;

Answer 1

你必须使用max-height和min-height而不是height。

这是：

body{
  background:#d0d0d5;
}

/*  Basic stucture
=====================*/
#accordion{
  margin:100px auto;
  width:400px;
}
#accordion ul {
  list-style:none;
  margin:0;
  padding:0;
}
.accordion {
  -webkit-transition: all 150ms ease-in-out;
  transition: all 150ms ease-in-out;
  max-height:0px;
  overflow:none; 
  line-height:1.3em; 
  overflow:hidden;
}
.accordion:target {
  -webkit-transition: all 150ms ease-in-out; 
  transition: all 150ms ease-in-out; 
  max-height: 300px /* or more 1000 */ ; 
  min-height: 100px
}
#accordion ul li a {
  text-decoration:none;
  display:block;
  padding:10px;
}
.accordion { 
  padding:0px;
}

/*  Colors 
====================*/
#accordion ul {
  /*box-shadow*/
  -webkit-box-shadow:0 4px 10px #3f3f3f;
  -moz-box-shadow:0 4px 10px #3f3f3f;
  box-shadow:0 4px 10px #3f3f3f;
  /*border-radius*/
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
}
#accordion ul li a {
  background: #2B2D30;
  border-bottom:1px solid orange;
  color: white;
}
.accordion {
  -webkit-transition: all 800ms ease-in-out; 
  transition: all 800ms ease-in-out;
  max-height: 0px;
  min-height: 0;
  background:#fdfdfd;
  color:#999;
}
.accordion:target {
  border-top:3px solid #ffbf87;
}

<div id="accordion">
    <ul>
        <li>
            <a href="#one">Q. test</a>
            <div id="one" class="accordion">
                test text
            </div>
        </li>
        <li>
            <a href="#two">Q. another tester</a>
            <div id="two" class="accordion">
                here is another text
            </div>
        </li>
        <li>
            <a href="#three">Q. I keep getting errors what do I do?</a>
            <div id="three" class="accordion">
                Take a look at <b>this page</b> to find the most common errors and a how to resolve them. Take a look at <b>this page</b> to find the most common errors and a how to resolve them. Take a look at <b>this page</b> to find the most common errors and a how to resolve them. Take a look at <b>this page</b> to find the most common errors and a how to resolve them. Take a look at <b>this page</b> to find the most common errors and a how to resolve them. Take a look at <b>this page</b> to find the most common errors and a how to resolve them.
            </div>
        </li>
    </ul>
</div>

https://jsfiddle.net/r6f6jbvy/1/

Answer 2

你想让它现在在我这里工作的动画伙伴

=ConcatPartLookUp(B2,A2:A6,"#",TRUE)

Answer 3

你可以试试这个

body{
    background:#d0d0d5;
  }
/*  Basic stucture
=====================*/
#accordion{margin:100px auto;width:400px;}
#accordion ul{list-style:none;margin:0;padding:0;}
.accordion{-webkit-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out; max-height:0px;overflow:none; line-height:1.3em; overflow:hidden;}
.accordion:target{-webkit-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out; max-height: 300px /* or more 1000 */ ; min-height: 100px}
#accordion ul li a{text-decoration:none;display:block;padding:10px;}
.accordion{padding:0px;}
/*  Colors 
====================*/
#accordion ul{
  /*box-shadow*/
  -webkit-box-shadow:0 4px 10px #3f3f3f;
  -moz-box-shadow:0 4px 10px #3f3f3f;
  box-shadow:0 4px 10px #3f3f3f;
  /*border-radius*/
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
}
#accordion ul li a{
  background: #2B2D30;
  border-bottom:1px solid orange;
  color: white;
}
.accordion{
  -webkit-transition: all 800ms ease-in-out; 
  transition: all 800ms ease-in-out;
  max-height: 0px;
  min-height: 0;
  background:#fdfdfd;
  color:#999;
}
.accordion:target{
  border-top:3px solid #ffbf87;
}

<div id="accordion">
  <ul>
    <li>
      <a href="#one" >Q. test</a>
      <div id="one" class="accordion">
        test text
      </div>
    </li>
    <li>
      <a href="#two">Q. another tester</a>
      <div id="two" class="accordion">
        here is another text
      </div>
    </li>    
    <li>
      <a href="#three">Q. I keep getting errors what do I do?</a>
      <div id="three" class="accordion">
        Take a look at <b>this page</b> to find the most common errors and a how to resolve them.
        Take a look at <b>this page</b> to find the most common errors and a how to resolve them.
        Take a look at <b>this page</b> to find the most common errors and a how to resolve them.
        Take a look at <b>this page</b> to find the most common errors and a how to resolve them.
        Take a look at <b>this page</b> to find the most common errors and a how to resolve them.
        Take a look at <b>this page</b> to find the most common errors and a how to resolve them.
      </div>
    </li>
  </ul>
</div>

如何正确设置手风琴的高度以使文字适合

3 个答案: