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，必须有其他东西（其他代码）触发这个。

jQuery Mobile正在删除我的课程

2 个答案: