Question

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

问题：当我在桌面宽度中加载页面时，一切都很好，因为我没有触发slideToggle，直到屏幕宽度为＆＃34; mobile＆＃34;大小... <1200px。

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

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

UPDATE：我写了一个IF语句来检查切换的div是否显示：阻止每当屏幕调整大小且宽度大于1200px时。这个测试每次都会返回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");
    }

Selector

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

这笔交易是什么？请参阅以下代码：

    <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

您可以尝试将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 2

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

Answer 3

经过无数次测试......唯一取代jQuery内联显示的东西：块为大于1200px宽的所有内容指定了@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;

        }

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

3 个答案: