Question

我基本上直接从jQuery网站复制了手风琴示例，并且它可以在所有浏览器中正常使用文本，但是，将我的视频标签和对象标签（用于后退到Flash）INSIDE任何手风琴部分将不再是要观看的视频（除非您将鼠标移动到视频所在的空白区域，右键单击并选择播放 - 它可以正常工作）。海报图片不会在该部分内显示。

如果我摆脱手风琴，那么视频会显示＆amp;播放正常（IE9中为HTML5，IE8中为Flash。显然，这是手风琴的问题，而不是我的播放器标记。

这是我正在使用的代码。

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> <!-- tried this with no luck for IE8 and IE9 -->
    <title>jQuery UI Accordion - Default functionality</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.9.1.js"></script>
    <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css">
    <script>
        $(function () {
            $("#accordion").accordion();
        });
    </script>
</head>
<body>
    <div id="accordion">
        <h3>Section 1</h3>
        <div>
            <p>
                Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
            </p>
        </div>
        <h3>Section 2</h3>
        <div>
            Hello there!
            <video id="WebVidPlayer6" width="640" height="360" controls="controls" poster="IM/mywebsite-TacTiles-Commercial-Oct-2011.jpg" preload="metadata">
                <source src="IM/mywebsite-TacTiles-Commercial-Oct-2011.webm" type="video/webm" />
                <source src="IM/mywebsite-TacTiles-Commercial-Oct-2011.ogv" type="video/ogg" />
                <source src="IM/mywebsite-TacTiles-Commercial-Oct-2011.mp4" type="video/mp4" />
                <object type="application/x-shockwave-flash" data="im/player_flv_maxi.swf" width="640" height="360" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0">
                    <param name="movie" value="im/player_flv_maxi.swf" />
                    <param name="width" value="640px" />
                    <param name="height" value="360px" />
                    <param name="allowFullScreen" value="true" />
                    <param name="play" value="false" />
                    <param name="loop" value="false" />
                    <param name="menu" value="false" />
                    <param name="quality" value="best" />
                    <param name="scale" value="default" />
                    <param name="wmode" value="opaque" />
                    <param name="allowScriptAccess" value="sameDomain" />
                    <param name="fullScreenAspectRatio" value="landscape" />
                    <param name="FlashVars" value="configxml=flash_base_config.xml&amp;startimage=http%3a%2f%2fwww.mywebsite.com%2fim%2fmywebsite-tactiles-commercial-oct-2011.jpg&amp;flv=http%3a%2f%2fwww.mywebsite.com%2fim%2fmywebsite-tactiles-commercial-oct-2011.flv"></param>
                    <img src="im/mywebsite-tactiles-commercial-oct-2011.jpg" width="640" height="360" alt="Video" /><p>Your browser can’t play HTML5 video.<a href="im/mywebsite-tactiles-commercial-oct-2011.flv">Click Here</a> to download.</p>
                </object>
            </video>

        </div>
        <h3>Section 3</h3>
        <div>
            <p>
                Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
            </p>
            <ul>
                <li>List item one</li>
                <li>List item two</li>
                <li>List item three</li>
            </ul>
        </div>
        <h3>Section 4</h3>
        <div>
            <p>
                Cras dictum. Pellentesque habitant morbi tristique senectus et netus
et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
mauris vel est.
            </p>
            <p>
                Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos himenaeos.
            </p>
        </div>


    </div>
</body>
</html>

查看页面源时，您可以看到代码完全相同。

（看起来像jQueryUI手风琴没有完全“显示”DIV中的内容，除非它只是文字）

有关如何解决此问题的任何建议吗？

Answer 1

找到解决方案。问题是jQuery正确以及它处理隐藏/显示标签的方式。我没有写自己的JavaScript，而是从这个网站找到了一个手风琴： http://sandbox.scriptiny.com/javascript-accordion/index.php

它是唯一可以与容器（如视频和物品标签）配合使用的手风琴 - 适用于IE 6及更高版本，Firefox，Safari，Chrome，Opera。它不依赖于jQuery（但与jQuery很好地配合使用）

在IE8和IE9中使用flash或HTML5视频的jQuery UI手风琴问题

1 个答案: