Question

我有一个有趣的问题。

背景：我有一个简单的标题。一个徽标和两个链接浮动在左侧，而两个下拉菜单链接浮动在右侧，所有包含在我100％宽度的标题div中。如果我将屏幕水平缩小，则两个下拉菜单链接会丢弃在左浮动元素下方（当然）。做了一些研究后，我决定使用overflow：隐藏在父标题div上，这样两个下拉菜单就会消失而不是掉到下一行。这种解决方案在我的情况下非常有用但是，我发现由于溢出：隐藏的解决方案，下拉菜单层被截断在标题下方。仅供参考，我的下拉菜单是使用简单的javascript创建的，可以在css类之间切换以获得下拉效果。我只是在javascript中向函数onclick事件添加了一行，当点击菜单链接时，溢出从溢出更改：隐藏到溢出：无（当然，当菜单未被单击时切换回隐藏），这很有用因为如果菜单按钮是可见的，它们应该永远不会溢出（它们会在有溢出时消失并隐藏）。

问题：如果用户打开菜单（也就是点击下拉菜单链接）并且在没有先关闭菜单的情况下收缩水平滚动条，则标题的溢出仍然设置为无，因为用户没有将标题切换回隐藏状态，因为菜单仍处于打开状态。因此，我原来的两个菜单链接的问题再次落在浮动的左侧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。谢谢！

Answer 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";

 }

}

精美工作，跨浏览器。有点粗糙，但很好。

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

1 个答案: