Question

我有一个带有视频标签的div，我的jQuery在该div上有.accordion（）。当我单击其中一个时，它会将div内部调整为全宽度一秒钟，然后调整到正确的指定宽度。有没有解决这个问题？例如，当我点击“系列2”标题时，系列1会像它应该的那样折叠，当系列2打开时，它会在一段时间内扩展屏幕宽度，然后再回到原始宽度。

代码：

<div id="accordion">
    <h3 class="stitle">Series 1</h3>

    <div class="viddiv>
        <h3 class="vidtitle">Video 1</h3>
        <div class="inner">
            <video controls preload="auto" width="600px" height="240px">
                <source src="myVid1.mp4" type="video/mp4">
            </video>
        </div>

        <h3 class="vidtitle">Video 2</h3>
        <div class="inner">
            <video controls preload="auto" width="600px" height="240px">
                <source src="myVid2.mp4" type="video/mp4">
            </video>
        </div>
    </div>

    <h3 class="stitle">Series 2</h3>
    <div class="viddiv">
        <h3 class="vidtitle">Video 3</h3>
        <div class="inner">
            <video controls preload="auto" width="600px" height="240px">
                <source src="myVid3.mp4" type="video/mp4">
            </video>
        </div>

        <h3 class="vidtitle">Video 4</h3>
        <div class="inner">
            <video controls preload="auto" width="600px" height="240px">
                <source src="myVid4.mp4" type="video/mp4">
            </video>
        </div>
    </div>
</div>

谢谢！

Answer 1

您可能忘记包含属性heightStyle: "content"

 $(function() {
   $( "#general" ).accordion({
      heightStyle: "content"
   });
 });

在您的手风琴功能中，这里有一个工作示例JsFiddle

jQuery .accordion（）通过里面的视频标签调整大小

1 个答案: