当溢出设置为隐藏时检测溢出

我有一个有趣的问题。当溢出设置为隐藏时检测溢出

背景：我有一个简单的标题。一个徽标和两个链接浮动在左侧，而两个下拉菜单链接浮动在右侧，所有包含在我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

当溢出设置为隐藏时检测溢出

回答

相关问题