當溢出設置爲隱藏時檢測溢出

我有一個有趣的問題。當溢出設置爲隱藏時檢測溢出

背景：我有一個簡單的標題。一個徽標和兩個鏈接浮動在左側，而兩個下拉菜單鏈接浮動在右側，所有包含在我100％寬度的標題div中。如果我足夠水平地縮小屏幕，則兩個下拉菜單鏈接會落在左浮動元素下面（當然）。在做了一些研究後，我決定使用overflow：隱藏在父標題div上，這樣兩個下拉菜單就會消失，而不會掉到下一行。該解決方案在我的情況下效果很好。但是，我發現由於溢出：隱藏的解決方案，下拉菜單層在標題下被切斷。僅供參考，我的下拉菜單是使用簡單的JavaScript創建的，它可以在CSS類之間切換以獲得下拉效果。我簡單地在javascript中添加了一個函數onclick事件，當點擊一個菜單鏈接時，溢出從溢出發生變化：隱藏到溢出：沒有（當然菜單沒有點擊時切換回隱藏），這很好用因爲如果菜單按鈕是可見的，它們應該永遠不會溢出（它們消失並在溢出時隱藏）。

問題：如果用戶打開一個菜單（又名點擊下拉菜單鏈接），然後在沒有首先關閉菜單的情況下收縮水平滾動條，則標題溢出仍然被設置爲none，因爲用戶hasn'由於菜單仍處於打開狀態，因此將標題切換回隱藏狀態。因此，我最初的問題是兩個菜單鏈接再次落在浮動的左側div下面。使用我已經在做的事情，我試圖在頭部提出一些onchange（）事件，它會檢測何時溢出，即使溢出被設置爲隱藏。有什麼想法嗎？

相關CSS代碼：

.level1raise { //header class 
background: #F8F8F8; 
margin: 0px; 
border-bottom: 1px solid #BCD2EE; 
height: 55px; 
overflow: hidden; 
} 
.level1drop { //alternate header class 
background: #F8F8F8; 
margin: 0px; 
border-bottom: 1px solid #BCD2EE; 
height: 55px; 
overflow: none; 
}

的Javascript樣品是切換菜單：

function supportdrop() { 

if (document.getElementById("support").className == "hidesupportmenu") { 
document.getElementById("support").className = "showsupportmenu"; 
document.getElementById("supportdrop").className = "supportmenuheadclicked"; 
document.getElementById("supportarrow").className = "uparrowimage"; 
document.getElementById("help").className = "hidehelpmenu"; 
document.getElementById("helpdrop").className = "helpmenuhead"; 
document.getElementById("helparrow").className = "downarrowimage"; //^THESE DEAL WITH MENU 
document.getElementById("level1").className = "level1drop"; //THIS IS THE HEADER TOGGLE 
} else if (document.getElementById("support").className == "showsupportmenu") { 
document.getElementById("support").className = "hidesupportmenu"; 
document.getElementById("supportdrop").className = "supportmenuhead"; 
document.getElementById("supportarrow").className = "downarrowimage"; //^MENU 
document.getElementById("level1").className = "level1raise"; //HEADER TOGGLE 
} 

}

如果你需要我發佈更多的代碼，我會的，但我想我已經包括一種顯示我在做什麼，否則讓我知道。我會發佈一個嘗試解決方案，但我不確定要嘗試什麼解決方案。我試圖避免JQuery。謝謝！

來源

2014-06-19 Pete_1

我想出了一個解決方案，爲其他任何嘗試類似路徑的人提供解決方案。因爲（1）我使用100％寬度的頁面，並且頁面是動態的，所以我可以禁用水平滾動條和（2）標題內部元素的寬度不會改變，因此我可以將最小所需寬度加起來下拉菜單鏈接拖放到下一行，我可以採用如下方案：

HTML：

<body onresize="checkwidth()">

的Javascript：

function checkwidth() { 

var currentwidth = window.innerWidth || document.documentElement.clientWidth || 
document.body.clientWidth; 

if (currentwidth < 770) { 

document.getElementById("level1").className = "level1raise"; 
document.getElementById("help").className = "hidehelpmenu"; 
document.getElementById("helpdrop").className = "helpmenuhead"; 
document.getElementById("helparrow").className = "downarrowimage"; 
document.getElementById("support").className = "hidesupportmenu"; 
document.getElementById("supportdrop").className = "supportmenuhead"; 
document.getElementById("supportarrow").className = "downarrowimage"; 

} else { 

document.getElementById("level1").className = "level1drop"; 

} 

}

精美的作品，是跨瀏覽器。有點粗糙，但是很好。

來源

2014-06-20 02:13:20

當溢出設置爲隱藏時檢測溢出

回答

相關問題