点击列表时jQuery Mobile的动画高度

debugcn 发表于 Dev

用户3400080

我正在用Jquery制作一个可扩展列表。

<style>
.showDetail { height:30px }
</style>

<ul data-role="listview" data-split-icon="delete" data-inset="true" class="recentList">
            <li id="recentCall1" class="menu-item">
                <a href="#" class="showDetail"> 
                    <h2>Title</h2> 
                    <div class="detail">detail Text</div>
                </a>
                <a class="btnDelList" href="#">Delete</a> 
            </li>
            <li id="recentCall2" class="menu-item">
                <a href="#" class="showDetail"> 
                    <h2>Title</h2> 
                    <div class="detail">detail Text</div>
                </a>
                <a class="btnDelList" href="#">Delete</a> 
            </li>
        </ul>
        <script> 
        var li = '';
        $(document.body).on('click', '.btnDelList' ,function(){
            li = $(this).parent();
            $('#popDel').popup("open");
        });

        $(document.body).on('click', '#okDel' ,function(){
            $('#popDel').popup("close");
            li.remove();
        });

        $(document.body).on('click', '#noDel' ,function(){
            $('#popDel').popup("close");
        });
        </script>

        <div data-role="popup" id="popDel" data-theme="d" data-overlay-theme="b" class="ui-content" style="max-width:340px; padding-bottom:2em;">
            <h3>Delete product?</h3>
            <p>Do you want to remove this product from the list?</p>
            <input id="okDel" data-inline="true" data-mini="true" data-icon="check" type="button" value="Delete!" />
            <input id="noDel" data-inline="true" data-mini="true" data-icon="delete" type="button" value="No" />
        </div>

如何在点击时使“ .showDetail”动画化高度：100px？（默认高度为30像素）

我无法在JQM上使用可折叠模块。因为很难组合删除项目脚本。

谁能帮我？

阿拉文

您可以为此使用jQuery .animate（）方法。.showDetail在如下所示的javascript变量中获取您的身高，

$(document).ready(function () {
    showHeight = $(".showDetail").height();
});

并在元素上单击时检查高度，然后如下所示对其进行动画处理，

$(".showDetail").on("tap", function () {
    if ($(this).height() == showHeight) $(this).animate({
        height: "100px"
    }, "fast");
    else $(this).animate({
        height: showHeight
    }, "fast");
});

查看此演示

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。