如何在屏幕大小更改时覆盖 jquery 滑块切换

当屏幕宽度小于 1200px 时，我尝试使用手风琴滑动切换导航，然后在宽度大于 1200px 时想要禁用/删除滑动切换功能。

问题：当我以桌面宽度加载页面时，一切都很好，因为我不会触发滑块切换，直到屏幕宽度为"移动"大小......<1200 像素。

如果我然后将屏幕大小调整为移动设备，我切换的div 甚至无需单击它们就已经可见。如果我调整为桌面宽度，一切都很好 - 切换div 消失了。如果我再次调整大小为移动设备，然后单击主链接以切换div并打开一个，然后调整为桌面，则我的内容是不可见的，但导航链接未对齐。 当我查看 css 时，我看到有一个内联 css 显示：block 用于切换的div。

尽管我多次尝试覆盖内联样式(.css，.removeClass，.addClass，.attr等(，但该死的代码行仍然存在。

更新：我写了一个 IF 语句来检查切换的div 是否在屏幕大小调整且大于 1200px 宽时显示：块。 这个测试每次都返回错误，但我可以看到元素的内联 css：display：block。 怎么会这样？这是测试的代码。另请参阅图像。

if ( $('mobile-child-nav-links').css('display') == 'block') {
        console.log("tested true");
        $('mobile-child-nav-links').css('display', 'none');
    } else {
        console.log("tested false");
    }

显示元素的内联样式设置为 display：block 的开发工具

显示我的 if 语句的开发工具控制台未检测到显示：当它明显存在时

这是怎么回事？请参阅下面的代码：

    <script>
        // Responsive accordian menu jquery 
        $( document ).ready(function() {
            var win = $(this); //this = window
            var currentScreenWidth; 
           var mobileLinksDiv = $('mobile-child-nav-links');
           var mobileLinksDivs = $('mobile-child-nav-link');
           function getScreenWidth() {
                return currentScreenWidth = $(window).width(); 
           }
           function enableMobileNav() {
                        // toggle on click of primary nav link
                        $('.primary-nav-link').off('click').on('click', function(e) { // prevents multiple click events from screen resizes
                           e.preventDefault();
                            $('.primary-nav-link').addClass('mobile-active-primary-link');
                            // locate the next sub menu div containing sub nav links and toggle it into view
                            var subNavContainer = $(this).nextAll('.mobile-child-nav-links').eq(0).toggle();
                        });
           }
          function disableMobileNav() {
            $('.mobile-child-nav-links').addClass('hideEls');
            $('.primary-nav-link').removeClass('mobile-active-primary-link');
            $('.primary-nav-link').off('click'); // remove click binding to avoid multiple .click events at once
            $('mobile-child-nav-links').hide(); // ensure that sub nav div and links are hidden 
           }
           // Checking page width on initial page load
           if (getScreenWidth() >= 1200) {
             // do nothing
           } else { 
              enableMobileNav();  
           }
            // Screen resizing triggers this function
            $(window).on('resize', function(e){
            currentScreenWidth = $(window).width();
             if (currentScreenWidth >= 1200) {
             $('.mobile-child-nav-links').addClass('hideEls');
                disableMobileNav();
              } else {
                enableMobileNav();
              }
            });  
        }); 
        </script>
CSS
    /* =================  Mobile Accordian Sub Nav ======================= */
 /*Sub nav links for mobile device nav */
 div.mobile-child-nav-links, div.mobile-child-nav-link {
        display: none;
        /*visibility:  hidden;*/
        background-color: #AF251F !important;
        color: white !important;
        letter-spacing: .1em;
        text-transform: uppercase;
        padding: .5em;
        font-size: .8em;
        font-weight: 400;
        padding-left: 1em;
}
@media screen and (max-width: 1200px) {
        div.mobile-child-nav-links, div.mobile-child-nav-link {
        display: block;
        /*visibility: visible;*/
        }   
    }
.hideEls {
    display: none;
    /*visibility:  hidden;*/
}
.showEls {
    display: block;
   /* visibility: visible;*/
}