Javascript jQuery"；“承诺”；将ol子弹重置为零_Javascript_Jquery_Internet Explorer_Html Lists_Promise

Javascript jQuery"；“承诺”；将ol子弹重置为零

javascript jquery internet-explorer

Javascript jQuery"；“承诺”；将ol子弹重置为零,javascript,jquery,internet-explorer,html-lists,promise,Javascript,Jquery,Internet Explorer,Html Lists,Promise,我正在编写的jQuery插件有问题，希望在这里得到一些指导这个插件只是一个简单的“手风琴”。单击标题时，其他已展开的部分将折叠，单击的部分将展开。（我知道有很多手风琴插件可以下载，但我也认为这是一个教育练习）下面是我的全页代码 <!DOCTYPE HTML> <html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/lib

我正在编写的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>


标题1
第1行
第2行
标题2
测验
（函数（$）{
$.collapse=函数（el，选项）{
var base=此；
基数.$el=$（el）；
base.init=函数（）{
base.$hidable=base.$el.find（'.hiddenContent'）；
base.$trigger=base.$el.find（'h3'）；
base.$hiddeble.hide（）；
}
base.init（）；
基本$trigger.on（'click'，函数（e）{
var$clicked=$（这个）；
var isVisible=（$clicked.next（'div.hiddenContent'）。is（'：visible'））？true:false；
基本$hiddeable.slideUp（300）；
base.$hidable.promise（）.done（函数（））{
如果（！isVisible）{
$clicked.next（'div.hiddenContent'）。向下滑动（300）
}
})
})
};
$.fn.collapse=函数（选项）{
返回此值。每个（函数（）{
（新的美元崩溃（此，选项））
})
}
})（jQuery）；
$（'.collapsablegroup'）.collapse（）；

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

我不知道为什么会发生这种情况，但我怀疑这与“承诺”功能有关。如果我在承诺之外使用slideDown命令，则不会发生这种情况。事实上，我的代码比这更大，而且承诺是必需的，因此，如果有人能在这个问题上阐明任何观点，我将不胜感激

非常感谢

您的意思是，当您第一次单击“标题1”时，项目符号的编号正确为1和2？这可能不是承诺，您可以尝试直接在上移动完成的回调。我现在对此有点困惑。有人告诉我这是JQuery中的一个bug，我应该记录一个bug。我做到了，得到了这样的回应。“这是IE中的一个已知错误，基于DOM操作的特定顺序。你可以看到，这是3年前在jQuery UI中出现的：解决方案只是更改样式更改的顺序。”在我的代码中，我一辈子都看不到需要重新排序什么才能使其正常工作。其他人有什么想法吗？你能不能也链接一下你自己的bug报告？谢谢你的时间Bergi，但我决定用另一种方法来处理这个问题。重新编写代码避免了这个问题。