jquery - jQuery Mobile 正在删除我的课程

Question

我有以下一段 HTML：

<footer data-role="footer" data-position="fixed" data-fullscreen="true">
    <div class="top-row">
        <div class="content">
            <img src="images/default-user.gif" width="45" height="45" alt="" class="avatar left">
            <a href="#" id="expand-footer" data-role="none">Expand</a>
        </div>
    </div>
</footer>

和扩展页脚的 JS：

toggleFooter: function(e) {
        e.preventDefault();
        var $footer = $('footer');

        if(footer_expanded) {
            $footer.animate({height:'50px'}, 500, function() {
                $('#expand-footer').toggleClass('expanded');
            });
        } else {
            $footer.animate({height:'550px'}, 500, function() {
                $('#expand-footer').toggleClass('expanded');
            });
        }
        footer_expanded = !footer_expanded;
    }

toggleFooter 函数由此调用：

$('#expand-footer').on('click', events.toggleFooter);

我遇到的问题是，一旦添加了扩展类，JQuery Mobile 就会将其删除。

谢谢

Answer 1

我最终这样做了，因为我没有时间真正深入研究这个问题：

toggleButton: function() {
        var $btn = $('#expand-footer');

        if(footer_expanded) {
            $btn.css({'background-position':'left bottom'});
        } else {
            $btn.css({'background-position':'left top'});
        }
    }

这行得通，因为 jQuery Mobile 没有要删除的类:)

Answer 2

我已经根据您的问题构建了一个JSFiddle。expanded此代码不会删除该类。必须有其他东西（其他代码）触发这个，如果expanded真的被删除了。