媒體查詢與jquery無關

正如您在我的筆中所看到的，每次點擊零售或批發時，我都會阻止重定向，而是會打開一個選項卡。媒體查詢與jquery無關

我該如何讓我的代碼可以使用大於767的設備或任何我想要的大小？

此刻我的jQuery如下所示：

$(document).ready(function(){ 
    if($(window).width() > 767){ 
      $('#retail a').on("click", function(e){ 
       e.preventDefault(); 
       $('li.retail').toggleClass('display'); 
       $(this).toggleClass('angle'); 
      }); 

      $('#wholesale a').on("click", function(e){ 
       e.preventDefault(); 
       $('li.wholesale').toggleClass('display'); 
       $(this).toggleClass('angle'); 
      }); 
    } 
});

您還可以檢查我的full code here

來源

2017-08-31 Wosley Alarico

你codepen工作正常 –

@AlivetoDie他們沒有切換效果。他們中的任何一個都應該顯示出來。 –

我的代碼無論窗口寬度如何工作，所以它是錯誤的。原因如果在屏幕上小於767並點擊零售，它不會重定向 –

$(document).ready(function(){ 
     $('#retail a').on("click", function(e){ 
      if($(window).width() > 767){ 
      $('li.retail').toggleClass('display'); 
      $(this).toggleClass('angle'); 
      } 
     }); 
     $('#wholesale a').on("click", function(e){ 
      if($(window).width() > 767){ 
      $('li.wholesale').toggleClass('display'); 
      $(this).toggleClass('angle'); 
      } 
     }); 
} });

請添加，如果點擊事件中的條件。看到我的上面的代碼。

來源

2017-08-31 09:44:41 Ankit

這個想法是正確的，並感謝支持。我只是重新添加了防止默認值，並刪除和額外大括號。快樂編碼 –

如果一個標籤有＃那麼它將是必要的event.preventDefault（） – Ankit

只是一個快速的....我注意到，代碼只適用於當我開始調整頁面大小。有沒有辦法在默認情況下觸發調整大小？ –

嘗試添加$(window).resize()功能。我曾嘗試過，它的工作原理。

$(document).ready(function(){ 
    $(window).resize(function(){ 
    if($(window).width() > 767){ 
      $('#retail a').on("click", function(e){ 
       e.preventDefault(); 
       $('li.retail').toggleClass('display'); 
       $(this).toggleClass('angle'); 
      }); 

      $('#wholesale a').on("click", function(e){ 
       e.preventDefault(); 
       $('li.wholesale').toggleClass('display'); 
       $(this).toggleClass('angle'); 
      }); 
    } 
}); 
});

來源

2017-08-31 09:51:27 bellabelle

你只要寫：

$(document).ready(function(){ 
    $(window).resize(function(){ 
     // your code 

    }); 
});

來源

2017-08-31 09:59:42 Samuel

它不完全工作。挑戰我對未來的回答 –

爲了使它成功地工作，我用了調整大小功能，並觸發調整大小，以使瀏覽器可以檢測窗口寬度，而無需啓動調整大小和jQuery的看起來像這樣：

$(document).ready(function(){ 
    $(window).resize(function(){ 
     if($(window).width() > 767){ 
      $('#retail a').on("click", function(e){ 
       e.preventDefault(); 
       $('li.retail').toggleClass('display'); 
       $(this).toggleClass('angle'); 
      }); 

      $('#wholesale a').on("click", function(e){ 
       e.preventDefault(); 
       $('li.wholesale').toggleClass('display'); 
       $(this).toggleClass('angle'); 
      }); 
     } 
    }).trigger('resize'); 
});

來源

2017-08-31 10:12:27

媒體查詢與jquery無關

回答

相關問題