- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
edit* 根据第一个回复,这可能无法通过 z-index 解决,因为这是元素定位的问题。这可能是发布新帖子的时候了,但是如果您阅读了我对第一个回复的评论,我可以用绝对位置解决此线程的问题,但会出现另一个问题 -> 设置具有绝对位置的元素的相对位置。 .. 这听起来有点违反直觉,大声笑。无论如何,将尽快删除这个问题,因为这个问题是完全不同的,值得不同的线程。
我正在尝试创建一个垂直导航菜单,其中的子菜单从上方(和后面)滑出并停在每个单击的导航项下方。我目前将 HTML 设置为在它们各自的导航项之后直接具有相关的子菜单,以便使用相对位置,我可以将 jQuery 设置为将子菜单设置为 top:0 的动画,并且它总是直接位于相关导航项的下方.
我将后续导航项设置为添加一个类以减少其 z-index。我希望这将使菜单能够从上方的导航项下方滑出(因为菜单具有较低的 z-index),同时位于下方项之上。
两者都没有用。正如您从下面链接的我的 fiddle 中看到的那样...菜单不仅会滑过上方的元素,还会将下方的元素推开。
我敢肯定有无数种方法可以做到这一点,但我觉得相对位置是处理多个子菜单的唯一方法,所有子菜单都需要相对于各自的导航项放置。但显然我的方法并非没有缺陷......
因此,我们将不胜感激任何帮助。
jQuery:
$('.row').click(function() {
// make all siblings AFTER row clicked get this class to reduce z-index and allow the menu to display above these rows (while still remaining below the rows above)
$(this).nextAll().addClass('rowZ');
$(this).next('.menu').show()
$(this).next('.menu').animate({'top':'0'});
});
// when menu is out, the row clicked is the header row, upon clicking this, the related menu (and by default, all subsequent menus within) animate back up and hide
$('.rowHead').click(function() {
$(this).next('.menu').animate({'top':'-100%'});
$(this).next('.menu').hide();
});
您还会注意到,我添加了一个类,用于在单击导航项并打开其子菜单时更改导航项的颜色。我想在单击此类时让子菜单重新出现...但这也不起作用吗?但这是一个不同的问题,可能是另一个线程。
在此先感谢您提供的所有帮助。
最佳答案
如果您希望您的子菜单项出现在其他菜单项之上,您需要使用 position:absolute
将它们从文档的正常流中移除。使用 position: relative
时,子菜单项的高度被考虑在内,将菜单项元素向下推。
示例:http://jsfiddle.net/Ps73y/3/
HTML
<div id="container">
<div class="menu-item">
<div>Menu Item 1</div>
<div class="sub-menu-items">
<div class="sub-menu-item">Sub Menu Item 1</div>
<div class="sub-menu-item">Sub Menu Item 2</div>
</div>
</div>
<div class="menu-item">
<div>Menu Item 2</div>
<div class="sub-menu-items">
<div class="sub-menu-item">Sub Menu Item 1</div>
<div class="sub-menu-item">Sub Menu Item 2</div>
</div>
</div>
</div>
CSS
.sub-menu-items{
position: absolute;
display: none;
top: 0;
background: red;
z-index:1100;
}
.sub-menu-item{
width:120px;
cursor:pointer;
position: relative;
}
.menu-item{
background:yellow;
width:120px;
position:relative;
left:0;
cursor: pointer;
}
#container{
background:grey;
width:120px;
height:100%;
position:fixed;
top:0;
left:0;
z-index:0;
}
Javascript
$(".menu-item").click(function(){
$(this).find(".sub-menu-items").css("top", $(this).height());
$(this).find(".sub-menu-items").slideToggle();
});
关于jquery - 滑出导航 : Z-Index Issue,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13637343/
我不知道我做了什么来破坏我的 QtCreator,但是“突然”我所有的编译器问题(警告/错误)不再显示在问题面板中,而是只显示在“编译输出”面板中(我在那里不能使用它们通过单击跳转到错误代码)。 在“
我正在制作游戏作为自学。 我的目标是在鼠标指针后面有一条轨迹。(这有效)但是,当我在 chrome 上打开并运行它时。在达到一定的高度和宽度后,轨迹保留在 Canvas 上而不是被擦掉。谁能帮我解决这
我希望通过在我的HTML文件中适当地格式化我的网站上的文本来增强它的外观。具体地说,我希望确保我的HTML文件中的代码在网站上显示得很好。此外,我正在寻求帮助实现我的网站导航栏。,我希望和其他内容显示
我希望通过在我的HTML文件中适当地格式化我的网站上的文本来增强它的外观。具体地说,我希望确保我的HTML文件中的代码在网站上显示得很好。此外,我正在寻求帮助实现我的网站导航栏。,我希望和其他内容显示
我希望通过在我的HTML文件中适当地格式化我的网站上的文本来增强它的外观。具体地说,我希望确保我的HTML文件中的代码在网站上显示得很好。此外,我正在寻求帮助实现我的网站导航栏。,我希望和其他内容显示
我一直在尝试将背景图像添加到 html 文档中元素的边框: 你可以在这里看到:HTML: Something CSS: a { border-width:10px; border-co
我即将开始一个连接两个程序的项目,一个用c#,一个用c++。我已经有一个可以工作的 c# 程序,它能够与自身的其他版本对话。在开始使用c++版本之前,我想到了一些问题: 1) 我正在使用 protob
我正在尝试线程优先级的影响,当 run 方法中的 println 保留在注释中时,两个线程同时结束,我不理解这种行为,你能解释一下吗?谢谢。 主类 public class Main { public
jQuery 1.4: $('#menu li:last:not(.ignore)').addClass('last'); HTML: item 1 ite
当我创建或查看问题时,我想从Mantis问题跟踪系统中删除选择配置文件及其所有随附字段,因为这些问题与我要创建的任何问题都不相关。 其中包括配置文件部分随附的“平台”,“操作系统”和“操作系统版本”字
我不在Master分支上工作。我正在开发另一种newFeature,该功能也发布在github上。 我知道在处理Master分支时如何解决问题:Closes #XXX。 但是,这仅在我在Master分
我需要在一些UICollectionViewCell中画一个圆圈。具有不同颜色边框和背景颜色的圆圈。我的代码。 UICollectionViewController - (UICollectionVi
我们将Trac用于我正在从事的开源项目。我想将所有公开票导出到Github的Issues。我已经找到了一些可能的小型脚本,但是我想知道是否有人这样做并提出了建议。 理想情况下,它将trac的描述语法转
我对 iOS 编程还比较陌生,但在其他语言(主要是 C# 和 Java)方面拥有丰富的编程经验。 我正在尝试为 iPad 设备的某些产品制作一个类似图片库的东西,其中包含指定的类别。用户界面非常简单,
我已经在中间人中激活了 I18n,如下所示: activate :i18n, mount_at_root: :de 现在我想自动从 / 重定向到 /de。这可能吗? 另外,我想知道为什么中间人使用 p
我已经成功编写了一个程序,可以从 Excel 文件中读取数据并将它们存储在 mysql 的表中。我的程序读取每个文件的第一行,创建表的字段,并将其余数据存储为每列中的值。正是因为这种情况以编程方式发生
这是我的代码。 function m1() { return new Promise(function(resolve, reject) { var files = $('#aws-upl
谁能告诉我这是怎么回事? #include #include #include #include #include class writeManager { std::vector
compile 'com.github.RogaLabs:social-login:1.2.1' compile 'com.github.mukeshsolanki:social-login-help
我有一个巨大的 csv 文件,其中包含 149 列 和 25K+ 行,可以在 MySQL 中上传该文件> 我正在使用MySQL LOAD DATA 查询 表我的查询是: LOAD DATA local
我是一名优秀的程序员,十分优秀!