Question

我有一个由两部分组成的列表：

<ul data-role="listview"  data-theme="a" data-inset="true" data-split-theme="c">

        <li>
            <a style="padding-top:0">
                <h5>Text 1</h5>
                <p><strong>Text 2</strong></p>
                <p>Date: April 17, 2012</p>
            <a href="http://some address" ></a>
        </li>

我想要做的是，当用户点击行的左侧部分中的任何位置时，我想播放音频文件（使用html5标记），并删除和替换此部分中的文本使用音频控制播放音频。当用户停止播放音频时，我希望能够恢复原状。

我是JQuery和JQueryMobile的新手，不知道从哪里开始。

理想情况下，如果有可能出现音频控件，那么可能会有某种翻转动画，例如行的那一部分旋转，一边是音频控件，另一边是文本。这样的事情有可能吗？

TIA

Answer 1

您可以在li中嵌套任意内容，这样您就可以在其中放置两个div容器并绑定到适当的事件，并根据它显示和隐藏它们。

例如：

标记：

<ul id="parentUL" data-role="listview"  data-theme="a" data-inset="true" data-split-theme="c">
        <li>
            <a  style="padding-top:0">
                <div class="txtCnt">
                <h5>Text 1</h5>
                <p><strong>Text 2</strong></p>
                <p>Date: April 17, 2012</p>
                </div>
                <div class="audioCnt displayNone">
                    <h1>Audio Controls</h1>
                </div>
        <a href="http://some address" ></a>
    </li>
    </ul>

JavaScript的：

$('#parentUL').on('click', '.txtCnt', function () {
    $(this).hide().parent().find('.audioCnt').show();
});

$('#parentUL').on('click', '.audioCnt', function () {
    $(this).hide().parent().find('.txtCnt').show();
});

是否可以动画替换列表视图的一部分

1 个答案: