Question

我正在使用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>

我如何制作＆＃34; .showDetail＆＃34;动画高度：点击时为100px？（默认高度为30px）

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

任何人都可以帮助我吗？

Answer 1

你可以使用jQuery .animate()方法。在javascript变量中得到.showDetail高度，如下所示，

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

查看DEMO

当点击列表时，jquery移动动画高度

1 个答案: