使用Bootsrap时,所有Jquery切换器都没有动画吗?

时间:2019-01-31 16:25:12

标签: jquery bootstrap-4

我正在使用Django和Bootsrap建立一个网站。我正在编写一些自定义JS以显示/隐藏组织树中的节点。但是,我注意到,无论我将动画时长参数设置为.toggle(1000)是什么,使用jquery的.toggle on调用的任何元素都会立即显示/隐藏。 GIF showing the issue

Bootsrap或Django还有其他问题吗?还是我的代码不好?我要附上实际JS函数的代码段以及同样呈现的HTML,这些代码在代码段中异常起作用,但在我的网站上却没有。作为参考,我正在使用jquery 3.3.1和Bootstrap 4.1.1

<ul>
                
                    <li class="tree-menu">

                        Root Organization-1
                        
                            <ul class="children">
                                
                    <li class="tree-menu">

                        Org1-2
                        
                    </li>
                
                    <li class="tree-menu">

                        parent3-3
                        
                            <ul class="children" style="">
                                
                    <li class="tree-menu">

                        child3a1-4
                        
                            <ul class="children" style="">
                                
                    <li class="tree-menu">

                        child3b1-6
                        
                    </li>
                
                            </ul>
                        
                    </li>
                
                    <li class="tree-menu">

                        child3a2-5
                        
                    </li>
                
                            </ul>
                        
                    </li>
                
                            </ul>
                        
                    </li>
                
            </ul>
            
            <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
                $('.tree-menu').click(function () {
                    console.log("CALLED TOGGLE");
                    console.log(this);
                    $(this).children().toggle(1000);
                    return false;
                });
            </script>

1 个答案:

答案 0 :(得分:0)

我明白了。这是Jquery的版本。这是我的导入:

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
            integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
            crossorigin="anonymous"></script>`