如何覆蓋jquery slidetoggle當屏幕尺寸變化

Question

我試圖使用手風琴slidetoggle導航當屏幕寬度小於1200px，然後想要禁用/刪除滑動功能時，它是大於1200px寬。

問題：當我在桌面寬度中加載頁面時，一切正常，因爲我沒有觸發slideToggle，直到屏幕寬度爲「移動」大小... < 1200px。

如果我然後調整屏幕的移動，我切換的div已經顯現，甚至沒有點擊它們。如果我調整到桌面寬度一切都很好 - 切換div已消失。如果我再次調整到移動設備的大小，然後點擊主鏈接切換div，並將其切換爲打開狀態，然後調整到桌面，我的內容將不可見，但導航鏈接不一致。當我看着CSS我看到有一個內聯的CSS顯示：切換div的塊。

儘管我多次試圖重寫內嵌樣式（的CSS，.removeClass，.addClass，.attr等）的代碼行該死持續。

更新：我寫了一條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"); 
    } 

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

你可以嘗試的風格屬性設置爲空字符串，以消除任何內嵌樣式。

$('.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內聯顯示的唯一一件事：block指定了一個@media屏幕查詢，其查詢寬度大於1200px。如果你看看我的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; 

     }