javascript - 如何在屏幕尺寸更改时覆盖 jquery slidetoggle

Question

我尝试在屏幕宽度小于 1200 像素时使用 Accordion 式滑动切换导航，然后在屏幕宽度大于 1200 像素时禁用/删除滑动切换功能。

问题:当我以桌面宽度加载页面时，一切正常，因为在屏幕宽度为“移动”尺寸之前我不会触发 slideToggle ... <1200px。

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

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

更新:我写了一个 IF 语句来检查切换的 div 是否显示:每当屏幕调整大小并且它的宽度大于 1200 像素时就会阻塞。这个测试每次都返回 false，但我可以看到元素的内联 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");
    }

Dev Tools showing that the element has inline style set to display:block

Dev Tools console showing my if statement is not detecting display:block when it is clearly there

这是怎么回事？请看下面的代码:

    <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;*/
}

Answer 1

内联样式和 jQuery 的 .css 是不同的东西。你不能依赖那个。使用 modernizr 媒体查询。