jQuery 手风琴中的动态内容(Textarea)

Dynamic content (Textarea) inside a jQuery Accordion

场景非常简单,我在 jQuery 手风琴中有一个文本区域。当我在浏览器上调整文本区域的高度时,当前手风琴的内容与下面的手风琴重叠。

<div class="accordion">
    <h3>Sec 1</h3>
    <div>
        <textarea></textarea>
        I move with the textarea
    </div>
</div>

<div>
    <span>I am being overlapped :o</span>
</div>

-我在动态附加内容(例如 )时遇到了类似的问题。我通过刷新手风琴克服了这个问题。

$(".accordion").accordion("refresh");

如何调整文本区域的大小?我不想捕获调整大小事件,因为我有很多文本区域,而且我不想跟踪它们的所有初始尺寸。谢谢!

编辑

我现在意识到,默认情况下手风琴将为 'overflowed' 内容创建一个滚动条。但是,我希望我的内容能够动态调整高度,所以我在 css

上进行了覆盖
.ui-accordion .ui-accordion-content {
        overflow: visible !important;
 }

这是一个工作演示。

https://jsfiddle.net/normangr7/vebw8o0b/

我认为您的问题的答案在这里:jQuery accordion w/input, how do you get the input to not close the accordion & still be able to control it?。在这个主题中,首先post,你可以找到非常有用的jsfiddle代码:手风琴中有4个textarea,它们没有重叠。

顺便说一句,感谢您提出问题,我正在研究一种适合页面中 7 个文本区域的方法,现在我找到了解决方案。

.ui-accordion .ui-accordion-content设置height : auto !important;

.ui-accordion .ui-accordion-content {
  height :auto !important;
  padding: 0px;
  overflow: visible !important;  
}

演示:http://jsfiddle.net/kishoresahas/vebw8o0b/1