56

如何添加展开/折叠过渡？

function showHide(shID) {
    if (document.getElementById(shID)) {
        if (document.getElementById(shID + '-show').style.display != 'none') {
            document.getElementById(shID + '-show').style.display = 'none';
            document.getElementById(shID).style.display = 'block';
        } else {
            document.getElementById(shID + '-show').style.display = 'inline';
            document.getElementById(shID).style.display = 'none';
        }
    }
}
.more {
    display: none;
    padding-top: 10px;
}

a.showLink,
a.hideLink {
    text-decoration: none;
    -webkit-transition: 0.5s ease-out;
    background: transparent url('down.gif') no-repeat left;
}

a.hideLink {
    background: transparent url('up.gif') no-repeat left;
}
Here is some text.
<div class="readmore">
    <a href="#" id="example-show" class="showLink" onclick="showHide('example');return false;">Read more</a>
    <div id="example" class="more">
        <div class="text">Here is some more text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae urna nulla. Vivamus a purus mi. In hac habitasse platea dictumst. In ac tempor quam. Vestibulum eleifend vehicula ligula, et cursus nisl gravida sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</div>
        <p><a href="#" id="example-hide" class="hideLink" onclick="showHide('example');return false;">Hide</a></p>
    </div>
</div>

http://jsfiddle.net/Bq6eK/1

4

5 回答 5

49

这是我自动调整高度的解决方案：

function growDiv() {
  var growDiv = document.getElementById('grow');
  if (growDiv.clientHeight) {
    growDiv.style.height = 0;
  } else {
    var wrapper = document.querySelector('.measuringWrapper');
    growDiv.style.height = wrapper.clientHeight + "px";
  }
  document.getElementById("more-button").value = document.getElementById("more-button").value == 'Read more' ? 'Read less' : 'Read more';
}
#more-button {
  border-style: none;
  background: none;
  font: 16px Serif;
  color: blue;
  margin: 0 0 10px 0;
}

#grow input:checked {
  color: red;
}

#more-button:hover {
  color: black;
}

#grow {
  -moz-transition: height .5s;
  -ms-transition: height .5s;
  -o-transition: height .5s;
  -webkit-transition: height .5s;
  transition: height .5s;
  height: 0;
  overflow: hidden;
}
<input type="button" onclick="growDiv()" value="Read more" id="more-button">

<div id='grow'>
  <div class='measuringWrapper'>
    <div class="text">Here is some more text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae urna nulla. Vivamus a purus mi. In hac habitasse platea dictumst. In ac tempor quam. Vestibulum eleifend vehicula ligula, et cursus nisl gravida sit
      amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</div>
  </div>
</div>

我使用了 r3bel 发布的解决方法：Can you use CSS3 to transition from height:0 to the variable height of content？

于 2012-08-07T00:13:44.337 回答
11

这应该可行，也必须尝试一段时间..：D

function showHide(shID) {
  if (document.getElementById(shID)) {
    if (document.getElementById(shID + '-show').style.display != 'none') {
      document.getElementById(shID + '-show').style.display = 'none';
      document.getElementById(shID + '-hide').style.display = 'inline';
      document.getElementById(shID).style.height = '100px';
    } else {
      document.getElementById(shID + '-show').style.display = 'inline';
      document.getElementById(shID + '-hide').style.display = 'none';
      document.getElementById(shID).style.height = '0px';
    }
  }
}
#example {
  background: red;
  height: 0px;
  overflow: hidden;
  transition: height 2s;
  -moz-transition: height 2s;
  /* Firefox 4 */
  -webkit-transition: height 2s;
  /* Safari and Chrome */
  -o-transition: height 2s;
  /* Opera */
}

a.showLink,
a.hideLink {
  text-decoration: none;
  background: transparent url('down.gif') no-repeat left;
}

a.hideLink {
  background: transparent url('up.gif') no-repeat left;
}
Here is some text.
<div class="readmore">
  <a href="#" id="example-show" class="showLink" onclick="showHide('example');return false;">Read more</a>
  <div id="example" class="more">
    <div class="text">
      Here is some more text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae urna nulla. Vivamus a purus mi. In hac habitasse platea dictumst. In ac tempor quam. Vestibulum eleifend vehicula ligula, et cursus nisl gravida sit amet.
      Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
    </div>
    <p>
      <a href="#" id="example-hide" class="hideLink" onclick="showHide('example');return false;">Hide</a>
    </p>
  </div>
</div>

于 2012-07-17T00:33:16.850 回答
1

http://jsfiddle.net/Bq6eK/215/

I did not modify your code for this solution, I wrote my own instead. My solution isn't quite what you asked for, but maybe you could build on it with existing knowledge. I commented the code as well so you know what exactly I'm doing with the changes.

As a solution to "avoid setting the height in JavaScript", I just made 'maxHeight' a parameter in the JS function called toggleHeight. Now it can be set in the HTML for each div of class expandable.

I'll say this up front, I'm not super experienced with front-end languages, and there's an issue where I need to click the 'Show/hide' button twice initially before the animation starts. I suspect it's an issue with focus.

The other issue with my solution is that you can actually figure out what the hidden text is without pressing the show/hide button just by clicking in the div and dragging down, you can highlight the text that's not visible and paste it to a visible space.

My suggestion for a next step on top of what I've done is to make it so that the show/hide button changes dynamically. I think you can figure out how to do that with what you already seem to know about showing and hiding text with JS.

于 2012-07-17T08:48:27.960 回答
1

OMG，我花了几个小时试图找到一个简单的解决方案。我知道代码很简单，但没有人提供我想要的东西。所以终于开始编写一些示例代码，并做了一些简单的事情，任何人都可以使用不需要 JQuery。简单的 javascript 和 css 和 html。为了使动画工作，您必须设置高度和宽度，否则动画将无法工作。很难找到。

<script>
        function dostuff() {
            if (document.getElementById('MyBox').style.height == "0px") {

                document.getElementById('MyBox').setAttribute("style", "background-color: #45CEE0; height: 200px; width: 200px; transition: all 2s ease;"); 
            }
            else {
                document.getElementById('MyBox').setAttribute("style", "background-color: #45CEE0; height: 0px; width: 0px; transition: all 2s ease;"); 
             }
        }
    </script>
    <div id="MyBox" style="height: 0px; width: 0px;">
    </div>

    <input type="button" id="buttontest" onclick="dostuff()" value="Click Me">
于 2018-03-06T22:55:30.840 回答
-4

这是一个根本不使用 JS 的解决方案。它改为使用复选框。

您可以通过将其添加到您的 CSS 来隐藏复选框：

.container input{
    display: none;
}

然后添加一些样式让它看起来像一个按钮。

这是我修改的源代码。

于 2012-07-20T19:30:50.947 回答