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が投稿した回避策を使用しました：CSS3を使用してheight：0からコンテンツの可変の高さに移行できますか？

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

このソリューションのコードは変更しませんでした。代わりに独自のコードを作成しました。私の解決策はあなたが求めていたものではありませんが、既存の知識を使ってそれを構築できるかもしれません。コードにもコメントを付けたので、変更を正確に処理していることがわかります。

「JavaScriptで高さを設定しないようにする」ための解決策として、「maxHeight」をtoggleHeightというJS関数のパラメーターにしました。これで、拡張可能なクラスの各divのHTMLで設定できます。

これは前もって言いますが、私はフロントエンド言語の経験があまりなく、アニメーションを開始する前に最初に[表示/非表示]ボタンを2回クリックする必要があるという問題があります。フォーカスの問題だと思います。

私の解決策のもう1つの問題は、divをクリックして下にドラッグするだけで、表示/非表示ボタンを押さなくても、非表示のテキストが何であるかを実際に把握できることです。表示されていないテキストを強調表示して、表示されているスペースに貼り付けることができます。 。

私が行ったことに加えて、次のステップについての私の提案は、表示/非表示ボタンが動的に変化するようにすることです。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 に答える