Ericson Baggio Ericson Baggio - 27 days ago 5
Javascript Question

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

This simple code not working:

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


Debuging:
checkElement
in
var checkElement = $this.next();
It contains an array of a position with the 'ul' element sibling:
print Chrome debugger

Error:


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


The exception is thrown before executing the callback / complete function.
In jQuery the error is within the method: animate

I also have the Angular loaded.

Forgive me for bad English

Answer

Finally solved. It was not conflict with Angular, but with a loaded jQuery library (http://rocha.la/jQuery-slimScroll) When running $.slimScroll thebody tag was overwritten for the slim effect in the scroll and this caused window.document.body to be null. Removed library and everything working.