javascript - 如何展开 div / 显示隐藏内容

Question

我的目标是扩展 .sort 宽度并显示 .sort-expand div 中的所有内容。当单击“更多”时，它向右扩展，.sort 从 200 像素扩展到 400 像素。并且，当再次单击时，会缩小。

    <div class="sort">
    <div class="mainimg"></div>
    <div class="infoarea">
        <h3>Main Name</h3>
        <p>Title of position</p>
        <p><span class="floatl">Tag01, Tag02</span><span class="floatr"><a href="#" class="show">more</a></span></p>
    </div>
    <div class="sort-expand">
        <div class="votes"></div>
        <div class="full-info"></div>
        <div class="other"></div>
    </div>
</div>

这还需要推动所有其他 .sort 区域，以免它们重叠。有任何想法吗？我将发布我开始但遇到困难的内容。非常感谢。

Answer 1

您应该能够使用 jQuery 的.slideDown()。 .slideDown()将在向下动画时推动其他元素并显示 div 的内容。在您想要的 div 上调用它：$("#myDiv").slideDown() 如果您希望它在再次单击时缩小，请使用.slideToggle()