0

jQuery の機能について少し学ぼうとしてい.animate()て、アニメーション化するものがいくつかありましたが、テーブルのアニメーションを希望どおりに設定できませんでした。

テーブルのhtmlは次のとおりです。

<div class="topSectionContainer">
    <div id="dropDownArrow">&#9658;</div><span class="editLabelTitle">Page Settings</span>
    <table class="topSectionTable">
        <tr>
            <td class="pageSettingsContainer"></td>
            <td class="fileBoxContainer">@Html.Raw(ContentGenerator.getFileBox("Tourism"))</td>
        </tr>
    </table>
</div>

次の機能を取得したいと思います。

  1. は割り当てられたかのtable.topSectionTableように始まります。display: none
  2. をクリックするdiv#dropDownArrowと、(アニメーション中に) テーブルの高さが増加し (高さプロパティが実際に調整されているかどうかに関係なく)、テーブルが拡大するにつれてテーブルの内容が明らかになるはずです。
  3. もう一度div#dropDownArrowクリックすると、逆にアニメーション化され、テーブルが非表示になり、その高さ (または外観) が縮小されます。

これには、アニメーションを持たない簡単なコード (jQuery) を既に使用しています。

$("#dropDownArrow").toggle(function () {
    $(".topSectionTable").css("display", "table");
    $("#dropDownArrow").html("&#9660;");
},
function () {
    $(".topSectionTable").css("display", "none");
    $("#dropDownArrow").html("&#9658;");
});

私が試したこと：

  • .animate()display プロパティでjQuery を使用します。表示プロパティの実際の変更が表示されないため、ここでの失敗の理由はわかりませんが、displayプロパティへの変更は jQuery の.animate().
  • また、とのtable.topSectionTable両方を反映するように CSS ルールを設定してから、高さプロパティのみをアニメーション化しようとしました。ここでは、高さのアニメーションは成功しましたが、高さが 0 であるかどうかに関係なく (要素のクリックで高さが伸縮するにもかかわらず) の内容が表示されます。overflow: hidden;height: 0px;td.fileBoxContainerdiv#dropDownArrow

私はこれがウェブサイトで常に行われているのを見てきましたので、方法があることを知っています. さらに、可能であれば IE8 でもこの機能を維持したいので、CSS3 だけでなく jQuery でこれを行いたいと考えています。

更新 -- HEIGHT 0 および OVERFLOW HIDDEN と JQUERY Animate を試してみる

jQuery コード:

$("#dropDownArrow").toggle(function () {
    $(".topSectionTable").animate({
        height: 100}, 1000);
    $("#dropDownArrow").html("&#9660;");
},
function () {
    $(".topSectionTable").animate({
        height: 0}, 1000);
    $("#dropDownArrow").html("&#9658;");
});

CSS:

table.topSectionTable
{
    height: 0;
    overflow: hidden;
}

td.pageSettingsContainer
{

}

td.fileBoxContainer
{

}

そして、HTMLは上記と同じです

私のC＃getFileBoxメソッド：

public static string getFileBox (string location)
{
    string content = "";
    string[] files = Directory.GetFiles(HttpContext.Current.Server.MapPath("~/CMS Files/" + location + "/"));

    foreach (var file in files)
    {
        content += Path.GetFileName(file);
        content += "<br/>";
    }

    return content;
}
4

3 に答える 3

0

試してみslideUp()てslideDown()、例はこちら、ドキュメントはこちら

于 2013-09-30T15:25:04.370 に答える
0

はい、使用すると言ったように：

$("#dropDownArrow").toggle(function () {
  $(".topSectionTable").slideDown();
  $("#dropDownArrow").html("&#9660;");
},
function () {
  $(".topSectionTable").slideUp();
  $("#dropDownArrow").html("&#9658;");
});
于 2013-09-30T15:29:14.747 に答える