Question

我正在编写一个jQuery插件的问题，并希望在这里提供一些指导。

该插件只是一个简单的“手风琴”。单击标题时，其他已展开的部分将折叠，并且单击的部分将展开。（我知道有许多手风琴插件可以下载，但我也认为这是一个教育练习）

以下是我的完整页面代码。

<!DOCTYPE HTML>
<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    </head>
    <body>
        <section class="collapsibleGroup">
            <div>
                <h3>Heading 1</h3>
                <div class="hiddenContent">
                    <ol>
                        <li>line 1</li>
                        <li>line 2</li>
                    </ol>
                </div>
            </div>
            <div>
                <h3>Heading 2</h3>
                <div class="hiddenContent">
                    test
                </div>
            </div>
        </section>
        <script>
            (function($) {
                $.collapse = function( el, options ) {
                    var base = this;

                    base.$el = $(el);

                    base.init = function() {
                        base.$hideable = base.$el.find('.hiddenContent');
                        base.$trigger = base.$el.find('h3');

                        base.$hideable.hide();
                    }

                    base.init();

                    base.$trigger.on('click', function(e){
                        var $clicked = $(this);
                        var isVisible = ($clicked.next('div.hiddenContent').is(':visible')) ? true : false;

                        base.$hideable.slideUp(300);
                        base.$hideable.promise().done(function(){
                            if(!isVisible) {
                                $clicked.next('div.hiddenContent').slideDown(300)
                            }
                        })
                    })
                };

                $.fn.collapse = function(options) {
                    return this.each(function() {
                        (new $.collapse(this, options))
                    })
                }
            })(jQuery);

            $('.collapsibleGroup').collapse();
        </script>
    </body>
</html>

我的问题 - 这只发生在Internet Explorer中 - 是这样的。如果单击“标题1”，您将看到它展开，并显示2个编号的项目符号。然后单击“标题2”，第一个标题将折叠，第二个标题将展开，显示一些文本。现在，如果再次单击“标题1”，第2部分将折叠，第1部分将展开，但编号的项目符号将编号为0（零）。

我不知道为什么会这样，但我怀疑它与“承诺”功能有关。如果我在承诺之外使用我的slideDown命令，则不会发生这种情况。实际上，我的代码比这个大，并且承诺是必需的，所以如果有人能够阐明这个主题，我将不胜感激。

非常感谢

jQuery“承诺”将子弹重置为零

0 个答案: