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 属性的实际更改没有显示，但我猜测displayjQuery 不支持对属性的.animate()更改。
  • 我还尝试设置 CSS 规则table.topSectionTable以反映两者overflow: hidden;和height: 0px;，然后只为 height 属性设置动画。在这里，高度动画是成功的，然而，td.fileBoxContainer无论高度是否为 0，其内容都会显示出来（即使高度会随着div#dropDownArrow元素的点击而扩展和收缩。

我一直在网站上看到这样做，所以我知道有办法。此外，我想在 jQuery 而不仅仅是 CSS3 中执行此操作，因为如果可能的话，我也希望在 IE8 中保留此功能，而且我知道 CSS3 没有机会这样做。

更新——尝试使用高度 0 和溢出隐藏，加上 JQUERY 动画

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

最终解决了这个问题：

好的，虽然这个页面是建议的副本：

显示器上的转换：属性

真正的副本（考虑到手头的问题，尤其是答案）应该是这样的：

溢出：使用表格时隐藏不起作用

对我的问题的简短回答是：

“溢出仅适用于块级元素。表元素不是块元素。”

因此，我的解决方案是简单地将我的表格包装在另一个 div 中并应用overflow: hidden;它的高度，然后使用 jQuery.animate()而不是表格来定位它。

至于为什么slideUp()和slideDown()不起作用，我只能推测当 jQuery 实现这些功能时，它使用了一些（如果不是全部）相同的功能，这些功能显然在非块级元素上中断。

于 2013-09-30T19:50:31.433 回答
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 回答