BOOTSTRAP-删除数据切换并使下拉菜单保持打开状态后，我的导航栏仍处于打开状态

Question

早上好，我在这里遇到一些奇怪的问题。我正在制作一个带有下拉菜单的导航栏。但是当我删除数据切换，aria-haspopup和aria-expanded ..我在使用按钮关闭导航栏时遇到问题。它仍然显示下拉菜单。当我关闭导航栏后，保持下拉菜单打开时，就会发生这种情况。

下面是我的示例代码。

js代码

       var sidebarLg = $('#sidebar-lg-toggle');
       var mainNav = $('.first-a:first-child');

       if($( window ).width() >= 992){
           mainNav.removeAttr('data-toggle');
           sidebarLg.click(function(){
               mainNav.toggleClass('dropdown-toggle');

               if(mainNav.hasClass('dropdown-toggle')){
                   mainNav.attr({
                       'data-toggle' : 'dropdown',
                       'aria-haspopup' : true,
                       'aria-expanded' : false
                   });
               }else{
                   mainNav.removeAttr('data-toggle aria-haspopup aria-expanded');
               }

           });
       }else{
           mainNav.addClass('dropdown-toggle');
           mainNav.attr('data-toggle', 'dropdown');
       }

HTML

<button class="navbar-toggler sidebar-toggler d-md-down-none" id="sidebar-lg-toggle" type="button"  data-toggle="sidebar-lg-show">
      <span class="navbar-toggler-icon"></span>
 </button>


<nav class="navbar navbar-light navbar-expand-lg mainmenu nav-bar-view-sm-device">
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav">
                    <li class="nav-item dropdown px-1 float-sm-left">
                        <a class="nav-link first-a" href="#">SERVICES</a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="#">Action</a></li>
                            <li><a class="dropdown-item" href="#">Another action</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </nav>