1

まず、ここでライブデモを参照してください：http：//khill.mhostiuckproductions.com/siteLSSBoilerPlate/

トップバーの中央にあるボタンをクリックすると、コンテンツを含むセクションが展開されます。現状では、この拡張はアニメートされません。

以下のコードとjsfiddleを考えると、これをアニメーション化するための最良の方法は何ですか？CSSトランジションを使用したいと思います。私のモバイル版はこのボタンが非表示になっていてクリックできないので、モバイルについては心配していません。

jsFiddle： http: //jsfiddle.net/HXVxs/

Javascript：

<script language="javascript"> 
    function toggle() {
        var ele = document.getElementById("toggleText");
        var text = document.getElementById("displayText");
        if(ele.style.display == "block") {
                ele.style.display = "none";
            text.innerHTML = "BUTTON";
        }
        else {
            ele.style.display = "block";
            text.innerHTML = "BUTTON";
        }
    } 
    </script>

HTML：

<!-- BUTTON PLACED IN MY TOP BAR -->
<div class="topbar">
<div class="company-list top-border"><a id="displayText" href="javascript:toggle();">Click here to display customer list.</a></div>
</div>


<!-- TOP WIDGET (different from top-bar, placed above top-bar in my HTML structure) -->

<div class="top-widget">
<div class="company-list-toggle bottom-border" id="toggleText" style="display: none">

    <p>Sample text here...</p>

<div class="company-list top-border"><a id="displayText" href="javascript:toggle();">Click here to display customer list.</a></div>

</div>
</div>

CSS：

.top-widget { /* tried CSS3 transitions here and did not work */
    position: absolute;
    z-index: 100;
    background: #2b332a;
}

ありがとう！

編集：簡単なメモ...標準のアコーディオンは私の問題を修正しません。これは、標準のアコーディオンが、含まれているdiv要素をクリックするとその内容を表示するためです。私の状況では、クリック時にコンテンツdivを表示するボタンは、content-div自体とは別のものです。通常のアコーディオンを適応させることはこの状況ではうまくいきません、あるいは私は最初からそれをしたでしょう。

再度、感謝します！

4

3 に答える 3

1

height（0との間で切り替えるscrollHeight）とCSSトランジションの使用：フィドル

于 2013-02-10T04:40:45.033 に答える
0

As a random example, look at: http://viralpatel.net/blogs/create-accordion-menu-jquery/

The jQuery solution does not mean you lose the CSS control, quite the opposite. I worked with "accordions" quite a bit, they work great in jQuery. Browser compatibility is pretty good as well.

于 2013-02-10T04:08:58.980 に答える
0

これは、優れたスタイルとアニメーションを備えたアコーディオンですhttp://jqueryui.com/accordion/。ページの横にある例を確認してください。ページ下部の「ソースの表示」をクリックすると、ソースコードを表示できます。

于 2013-02-10T04:30:45.637 に答える