0

次の 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 がそれを削除することです。

ありがとう

4

2 に答える 2

0

私はあなたの質問からJSFiddleを構築しました。このコードではクラスexpandedは削除されません。expanded本当に削除された場合、これをトリガーする何か他のもの（他のコード）が必要です。

于 2013-01-25T23:22:11.800 に答える
0

問題を実際に掘り下げる時間がなかったので、私はこれを行うことになりました：

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

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

jQuery Mobileが削除するクラスがないため、これは機能します:)

于 2013-01-25T23:15:58.590 に答える