前端导航栏下拉框鼠标悬浮弹出失败

这是写的事件,静态页面上好这,但是我挪到Django上就不行了,

$('li.dropdown').find('.fa-angle-down').each(function(){
        $(this).on('click', function(){
            if( $(window).width() < 768 ) {
                $(this).parent().next().slideToggle();
            }
            return false;
        });
    });

HTML是这样的,有大佬知道怎么改么?

 <li class="dropdown"><a href="#">分类 <i class="fa fa-angle-down"></i></a>
                            <ul role="menu" class="sub-menu">
                                <li><a href="aboutus.html">About</a></li>
                                <li><a href="aboutus2.html">About 2</a></li>
                                <li><a href="service.html">Services</a></li>
                                <li><a href="pricing.html">Pricing</a></li>
                                <li><a href="contact.html">Contact us</a></li>
                                <li><a href="contact2.html">Contact us 2</a></li>
                                <li><a href="404.html">404 error</a></li>
                                <li><a href="coming-soon.html">Coming Soon</a></li>
                            </ul>
                        </li>

如果是静态文件可以的话，那应该就没有问题，你看下是不是jq没加载或者没加载完导致的，建议你再外层包一层window.onload 试试

window.onload =  function () {
    $('li.dropdown').find('.fa-angle-down').each(function(){
        $(this).on('click', function(){
            if( $(window).width() < 768 ) {
                $(this).parent().next().slideToggle();
            }
            return false;
        });
    });

}

下拉菜单为什么不用组件实现呢，bootstrap或者ant design