jQuery slideDown ($.slideDown)动画错误:Uncaught TypeError: Canno

jQuery slideDown ($.slideDown) animated error: Uncaught TypeError: Cannot read property 'style' of undefined

本文关键字：slideDown Uncaught Canno 错误 TypeError 动画 jQuery      更新时间：2023-09-26

这个简单的代码不起作用:

$('li a').off('click').on('click', function(e){
  var checkElement = $this.next();
  checkElement.slideDown(500, function () {
        checkElement.addClass('menu-open');
  });
});
HTML: 

<ul class="sidebar-menu">
<li>
    <a href="unsafe:javascript:void(0)">
        <i class="fa "></i><span class="ng-binding">Level 1</span>
        <span class="pull-right-container">
            <i class="fa fa-angle-left pull-right"></i>
        </span>
    </a>
    <ul class="treeview-menu">
        <li>
            <a href="#/level2" class="ng-scope">
                <i class="fa "></i> <span class="ng-binding">Level 2.1</span>
                <span class="pull-right-container">
                    <i class="fa fa-angle-left pull-right"></i>
                </span>
            </a>
        </li>
        <li>
            <a href="#/level2" class="ng-scope">
                <i class="fa "></i> <span class="ng-binding">Level 2.2</span>
                <span class="pull-right-container">
                    <i class="fa fa-angle-left pull-right"></i>
                </span>
            </a>
        </li>
    </ul>
</li>
</ul>

debug: checkElement in var checkElement = $this.next();它包含一个位置数组，与'ul'元素同级:打印Chrome调试器

错误:

jquery-2.2.3.min.js: Uncaught TypeError: Cannot read property 'style' of undefined

在执行回调/完成函数之前抛出异常。在jQuery中，错误在方法:animate

中

我还加载了Angular。

原谅我英语不好

$this.next();应为$(this).next();

并希望$('.sidebar-menu > li > a')指向直接的<a>子节点

$('li > a').off('click').on('click', function(e){
  var checkElement = jQuery(this).next('.treeview-menu');
  checkElement.slideDown(500, function () {
        checkElement.addClass('menu-open');
  });
});
.treeview-menu {
  display: none;
}
.menu-open {
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="sidebar-menu">
<li>
    <a href="unsafe:javascript:void(0)">
        <i class="fa "></i><span class="ng-binding">Level 1</span>
        <span class="pull-right-container">
            <i class="fa fa-angle-left pull-right"></i>
        </span>
    </a>
    <ul class="treeview-menu">
        <li>
            <a href="#/level2" class="ng-scope">
                <i class="fa "></i> <span class="ng-binding">Level 2.1</span>
                <span class="pull-right-container">
                    <i class="fa fa-angle-left pull-right"></i>
                </span>
            </a>
        </li>
        <li>
            <a href="#/level2" class="ng-scope">
                <i class="fa "></i> <span class="ng-binding">Level 2.2</span>
                <span class="pull-right-container">
                    <i class="fa fa-angle-left pull-right"></i>
                </span>
            </a>
        </li>
    </ul>
</li>
</ul>

终于解决了。它与Angular没有冲突，但与加载的jQuery库(http://rocha.la/jQuery-slimScroll)有冲突。当运行$.slimScroll时，body标记被覆盖，以便在滚动中显示苗条效果，这导致window.document.body为空。删除库和一切正常

相关文章：