Question

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

$('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>

在[{1}}中展开：checkElement它包含一个带有＆＃39; ul＆＃39;的位置数组。元素兄弟： print Chrome debugger

错误：

jquery-2.2.3.min.js：Uncaught TypeError：无法读取属性＆＃39; style＆＃39;未定义的

在执行回调/完成功能之前抛出异常。在jQuery中，错误在方法中：animate

我也加载了Angular。

原谅我的英语不好

Answer 1

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

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

＆＃13;

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

＆＃13;

.treeview-menu {
  display: none;
}
.menu-open {
  color: red;
}

＆＃13;

<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>

＆＃13;

Answer 2

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

jQuery slideDown（$ .slideDown）动画错误：未捕获TypeError：无法读取属性＆＃39; style＆＃39;未定义的

2 个答案: