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

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();
});