`
fuleonardo
  • 浏览: 179536 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

再也不让select和iframe挡住我们的menu了!

阅读更多
<div id="grid_DropDwn" class="grid_DropDwn">
<iframe style="position:absolute;z-index:-1;display:none;"</iframe>
<div id="grid_DropMenu">
<ul><li></li></ul>
</div>
</div>

 

在ul所在的div前边放一个iframe

position:absolute

是让iframe和li所在的位置一样,如果不加iframe就在li的上边显示

z-index:-1

是让iframe在li的底下.就是ul所在的div的下层


var grid_DropDwn=$('#grid_DropDwn')
$('#grid_DropDwn iframe').css({width:grid_DropDwn.width(),height:grid_DropDwn.height()}).show()

让iframe的高和宽与li适应
我这里用得jquery.


$(".grid_DropDwn").css("display","none").find('iframe').hide();
在menu需要隐藏的时候在将iframe隐藏就可以了

搞定!
而且经过实验,这样做也是可以浮在applet上层的.
分享到:
评论

相关推荐

    jquery下拉菜单插件SelectMenu

    本文将详细介绍 `SelectMenu.js` 的核心特性和使用方法。 ### 1. 插件简介 `SelectMenu.js` 是一个轻量级的解决方案,旨在替代传统的 `&lt;select&gt;` 元素,以提供更美观、功能更丰富的用户体验。这个插件可以将任何 `...

    解决下拉菜单被iframe遮住问题

    如果以上方法都无效,或者`iframe`内容不受控制,考虑重新设计布局,避免使用`iframe`,使用其他技术如组件化或者服务端渲染来实现相同功能。 ### 4. 实例分析 提供的"下拉菜单效果图.JPG"展示了下拉菜单被`iframe...

    select 从 iframe 中跑出来咯。。。郁闷

    使用iframe遮盖select出现的问题

    SelectMenu简洁易用多样的下拉菜单解决方案

    4. **无障碍性**:确保`SelectMenu`符合Web无障碍标准,比如使用`aria-*`属性,让屏幕阅读器用户也能正常操作。 总之,`SelectMenu` 是一个强大且灵活的下拉菜单解决方案,为开发者提供了丰富的功能和定制空间,...

    jquery select menu

    通过上述内容,我们可以看出jQuery UI的`selectmenu`是一个强大的工具,可以提升网页中下拉菜单的用户体验。正确地集成和配置这个组件,可以让网页更加互动和专业。在实际项目中,开发者可以根据需求进行适当的调整...

    解决 Ie 6下 select挡住div的通用函数

    /** * 让iframe 显示在 指定的div下面 针对ie6 select挡住div 的bug 采用 iframe来当作div的底 * * @param string divId 需要解决的div层 * @param string iframeId 采用的 IFRAME ,如果不指定 自动...

    详解为element-ui的Select和Cascader添加弹层底部操作按钮

    如下图这样把操作按钮放在select弹层底部是一种挺常见的设计方式 但是很遗憾element-ui没有给我们提供这个插槽,我们想实现这个功能只能重写组件或者等官方更新吗,答案当然是否定的! 花了一点时间通过一个函数...

    select+navigator+treemenu

    select+navigator+treemenuselect+navigator+treemenuselect+navigator+treemenuselect+navigator+treemenuselect+navigator+treemenuselect+navigator+treemenu

    XSelect v1.0, XMenu v1.3, Select v1.3.1, Menu v1.0.1

    无限级菜单结构 与 列表框无限级联动, 类 XSelect by shawl.qiu 压缩包包含: XSelect v1.0, XMenu v1.3, Select v1.3.1, Menu v1.0.1 (带X的是单表, 不带X的是多表.)

    select美化HTML的select标签的原始样式,并且不影响原始select的事件方法调用

    在网页设计中,`&lt;select&gt;` 标签用于创建下拉列表,但其默认样式往往不符合现代网页的美观要求。为了提升用户体验并保持与原始HTML`&lt;select&gt;` 标签的功能兼容性,开发者通常会使用自定义样式来美化下拉菜单。本主题...

    使select可以输入

    自制的jquery插件,只需要一行代码,即可将select控件变成一个即可以输入也可以选择的元素,输入时也会有智能提示。对原来的select的操作完全没有改变,取值依然是取select的...不知道怎么监控脚本对select的值的修改。

    select 分组下拉菜单自定义样式

    然而,浏览器默认的`select`样式通常较为简单,不能满足所有设计需求。本话题将深入探讨如何自定义`select`分组下拉菜单的样式,以实现更美观且功能丰富的交互效果。 首先,我们需要了解`&lt;select&gt;`的基本结构。一个...

    easyui iframe 页面重复加载的问题

    首先在页面加载完成事件中,遍历所有的iframe,将src设置为空字符串,然后绑定一个事件监听器到easyui的tab组件上,监听tab的select事件。在该事件中,获取被选中的标签对应的iframe,并为其动态设置正确的src值。 ...

    使用iframe作为日历的载体,不再被select和flash等控件挡住的日期输入框

    ### 使用iframe作为日历的载体,不再被select和flash等控件挡住的日期输入框 在Web开发过程中,经常会遇到日期选择器与页面上的其他元素(如`&lt;select&gt;`下拉菜单、Flash插件等)重叠导致交互不便的问题。为了解决这...

    让div浮动在select之上的完美解决方案!多浏览器兼容

    在网页设计中,有时我们需要使一个`div`元素覆盖或浮动在`select`元素之上,以便实现特定的交互效果,如弹出层、提示信息或者自定义下拉菜单等。然而,由于浏览器之间的渲染差异,这往往成为一个挑战。本文将探讨...

    jquery实现select互斥联动

    在本示例中,我们将探讨如何使用jQuery实现“select”元素的互斥联动效果,这是一种常见的表单控件交互设计,常用于多级筛选或配置场景。 一、基本概念 1. jQuery:jQuery 是一个高效、简洁而易用的JavaScript库,...

    DropDownMenu下拉菜单改进版

    在项目中,我们看到有多个关键文件,如`build.gradle`和`settings.gradle`,这是Gradle构建系统的配置文件,用于自动化项目的构建、依赖管理和打包。`gradlew`和`gradlew.bat`是Gradle的可执行脚本,确保在不同操作...

    IE6下 Jquery EasyUI 弹出窗口层无法挡住select 组件 解决方案

    在IT行业中,尤其是在Web开发领域,我们经常遇到各种浏览器兼容性问题。本文将详细探讨一个特定的问题,即在Internet Explorer 6(IE6)环境下,使用JQuery EasyUI时,弹出窗口(对话框)无法正确遮挡页面上的select...

    Update和Select结合使用

    在数据库管理与应用开发的过程中,经常会遇到需要对大量...通过上述分析可以看出,`UPDATE`与`SELECT`结合使用不仅可以简化复杂的数据库操作,还能有效提升处理效率,是数据库管理和应用程序开发中不可或缺的技术之一。

    jQuery手机下拉框select

    `jQuery手机下拉框select` 主要关注于改善移动端的用户体验,通过JavaScript和CSS增强下拉框的外观和功能。 ### jQuery Mobile Select Menu jQuery Mobile 提供了一个专门的 Select Menu 插件,用于将标准的...

Global site tag (gtag.js) - Google Analytics