jquery窗口調整大小問題在響應式網頁設計的斷點

我正在做一個響應式網站。這裏是提琴：jquery窗口調整大小問題在響應式網頁設計的斷點

我做了一些影響火當窗口寬度小於768px小，和其他一些影響火當winddow寬度寬於768px。除非手動調整瀏覽器窗口大小並傳遞768px斷點，否則效果無法正常工作或佈局中斷，所有工作都很好。

例如，向下滾動時，會看到「+」按鈕。我已經編碼，所以當你的菜單出現hover'+'按鈕在窗口寬度超過768px ...在窗口寬度小於768px，菜單應該只出現在你點擊'+'按鈕。

但是，當你在1200像素的瀏覽器窗口大小，例如瀏覽網頁，並手動將其調整爲600px的，+按鈕仍然旋轉的「懸停」和sidemenu上幾個點擊出現--thus單擊事件不好好工作。只要刷新它，它就可以正常工作。所有其他與768px斷點有關的效果都無法正常工作。

我已經googlged和搜索論壇，並嘗試過他們，但沒有運氣。我也試圖把如果（windowsize> 768）在$（窗口）.scroll（函數（）{這樣的：？

function checkWidth() { 
    var windowsize = $window.width(); 

    $(window).scroll(function() { 
     if (windowsize > 768) { 
     var clicked = false; 

      if ($(window).scrollTop() >= 80 && clicked === false) { 
       $("#headerWrap").hide().css("position","fixed") 
       ...

，但它沒有工作，要麼需要什麼做我一直在努力摸不着頭腦的最後兩天，現在完全耗盡。任何幫助將不勝感激！

來源

2014-10-04 Ernie

有大量的代碼，並在懸停我的地方沒有火災。您能否將代碼分解爲單個問題和疑問？有一件事可以幫助你，是危險的'！important'css屬性。這是一件你應該儘可能少用的東西。你知道css是從你的文件的頂部到底部級聯，最後讓我們說添加的顏色將是顏色。現在jQuery不是在css文件中編寫的，它在html標籤中使用了這些內聯樣式，它們總是比CSS樣式更強。現在用'！important'可以覆蓋內聯樣式。其他方法是從JS – caramba 2014-10-04 09:21:16

@ caramba中刪除'.attr（'style'）'謝謝你的回覆。你可以調整jsfiddle結果部分的寬度大於768像素（它應該切換到兩個列布局），重新運行代碼，並向下滾動？您會看到頂層菜單消失，並出現+按鈕。當您懸停此按鈕時，它應該旋轉並重新顯示頂層菜單。如果您發現懸停時發生任何效果，請告訴我。 – Ernie 2014-10-04 10:34:17

@caramba我也很快刪除了我的代碼......這可能仍然很粗糙，但您仍然可以看到懸停點擊問題。如果您查看寬度超過768px的結果部分，則會看到+按鈕在懸停時會旋轉，並且當您調整窗口大小時，懸停事件仍然存在，並且單擊事件功能不正常。（你必須點擊幾次讓sidemenu進出滑動，這裏是小提琴：http://jsfiddle.net/c6c99sbf/5/ – Ernie 2014-10-04 10:55:12

你有一個巨大的'如果別人的情況下，你應該模塊化使用功能

你有沒有「unbinded」你在'else'條件上綁定'if'條件的函數所以發生的事情是綁定在'if'條件下的函數在'window.resize'事件的'其他'條件下，更多的函數被綁定。

參見：http://api.jquery.com/unbind/的細節

所有最優秀的。

來源

2014-10-04 13:38:20

我認爲你應該使用css和media queries建立有效的響應式設計

來源

2014-10-05 09:03:04

jquery窗口調整大小問題在響應式網頁設計的斷點

回答

相關問題