屏幕大小更改时如何覆盖jquery slidetoggle

Question

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

问题：当我以桌面宽度加载页面时，一切都很好，因为在屏幕宽度为“移动”大小之前我不会触发 slideToggle...

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

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

更新：我写了一个 IF 语句来检查切换的 div 是否是 display:block 每当屏幕调整大小并且它大于 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");
    }

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 媒体查询。

Answer 2

您可以尝试将 style 属性设置为空字符串以删除任何内联样式。

$('.styled-nav-link').attr('style', '');

编辑：小心你的 jQuery 选择器。我在您的代码中看到几个地方没有说明您是选择一个类还是一个 id。这可能是您的测试失败的原因。尝试仔细检查您的代码是否有错误。我相信以上应该有效。

例如本节：

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

应该是：

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

您的代码中还有其他地方也需要添加句点。仔细检查一下，看看这是否对您有任何改变。

另外，是的。 jQuery 的 .css 函数只是应用内联样式。除非我弄错了，请让我知道它们有何不同。添加 Modernizr 只会增加额外的页面重量。

Answer 3

经过无数次测试……唯一取代 jQuery 的内联 display:block 的是为大于 1200 像素宽的所有内容指定一个 @media 屏幕查询。如果您查看我的 CSS，我已经在元素的 css 中指定了 display:none，您会认为这将是样式，除非被覆盖，这正是 jQuery 所做的。但是，为桌面屏幕宽度指定 display:none 是唯一有效的方法。

    /* Overrides jQuerys inline style of display:block at runtime. */
@media screen and (min-width: 1200px) {
        div.mobile-child-nav-links, div.mobile-child-nav-link {
        display: none!important;

        }