`
koudailidexiaolong
  • 浏览: 96132 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

使用style样式隐藏显示下级菜单的方法

 
阅读更多

<style type="text/style">

/*菜单 展开状态*/
.nav dl.open dt{ background-position:0 0;}
.nav dl.open dd{ display:block;}

</style>

<dl class="open">
<dt onclick="this.parentNode.className=this.parentNode.className=='open'?'':'open';">报销单管理</dt>
<dd><a href="index.html" target="_self">添加报销单</a></dd>
<dd><a href="list.html" target="_self">审核报销单</a></dd>
</dl>
<dl>
<dt onclick="this.parentNode.className=this.parentNode.className=='open'?'':'open';">我要采购</dt>
<dd>信心收件箱</dd>
<dd>信心发件箱</dd>
</dl>
<dl>
<dt onclick="this.parentNode.className=this.parentNode.className=='open'?'':'open';">我要销售</dt>
<dd>信心收件箱</dd>
<dd>信心发件箱</dd>
</dl>
<dl>
<dt onclick="this.parentNode.className=this.parentNode.className=='open'?'':'open';">信息中心</dt>
<dd>信心收件箱</dd>
<dd>信心发件箱</dd>
</dl>
</div><wbr></wbr>

分享到:
评论

相关推荐

    JQuery 下方隐藏折叠菜单

    对于"JQuery 向下隐藏折叠菜单"的设计,我们通常会使用到以下jQuery方法: 1. `$(document).ready()`:这是jQuery的一个常用函数,确保DOM(文档对象模型)加载完成后再执行里面的代码,防止因DOM未完全加载而导致...

    仿京东鼠标经过弹出下级菜单

    2. **CSS(Cascading Style Sheets)**:CSS负责网页的样式和布局。利用CSS,我们可以控制菜单项的显示、位置、颜色、字体等视觉效果。关键在于使用`:hover`伪类来指定鼠标悬停在主菜单项上的行为,此时显示子菜单。...

    jQuery可智能判断下级菜单特效.zip

    在前端开发中,jQuery库因其简洁的语法和强大的功能,被广泛用于实现各种交互效果,如本案例中的“jQuery可智能判断下级菜单特效”。这个压缩包文件包含了一个使用jQuery实现的下拉菜单特效,主要涉及到的技术点包括...

    多级 菜单 多级 菜单

    可以使用媒体查询(`@media`)来调整菜单样式,或者考虑使用汉堡菜单(也称为导航抽屉)在小屏幕上显示菜单。 5. JavaScript优化:虽然仅用CSS可以实现基本的多级菜单,但更复杂的功能(如点击展开、记忆上次状态等...

    JS多级联动浮动菜单

    - 使用CSS伪类如`:hover`来定义当鼠标悬停在菜单项上时的样式变化,如显示隐藏的子菜单。 3. **JavaScript逻辑**: - 使用JavaScript监听事件,通常是`mouseover`和`mouseout`事件,来控制菜单的展开和收起。当...

    面包屑多级下拉菜单

    对于多级下拉,我们需要在鼠标悬停或点击特定级别时显示下级菜单。CSS提供了`display`属性来控制元素的可见性,通过将`display`设置为`none`来隐藏下拉菜单,然后在悬停事件中更改为`block`或`inline-block`来显示。...

    jQuery水平下拉三级菜单

    接下来,我们需要编写CSS样式,使菜单水平排列,并隐藏下级菜单。基本样式可能如下: ```css #menu { list-style-type: none; margin: 0; padding: 0; } #menu &gt; li { float: left; } #menu ul { display: ...

    js加html编写的级联菜单

    1. **事件监听**:通过监听用户的鼠标悬停或点击事件,JavaScript可以触发下级菜单的显示和隐藏。 2. **DOM操作**:使用DOM(文档对象模型)API,JavaScript可以创建、修改或删除HTML元素,从而动态构建和更新菜单...

    xhtml+CSS 菜单

    /* 鼠标悬停时显示下级菜单 */ } ``` 四、CSSTabDesigner2工具 压缩包中提到的"csstabdesigner2"可能是一个CSS Tab Designer的版本,这是一个用于创建和预览CSS样式tab组件的工具。该工具可以帮助开发者快速生成...

    完美横向多级菜单解决方案

    5. **图片资源和CSS样式**:`images`目录存储了可能用于美化菜单的图像资源,例如箭头图标,用于指示有下级菜单。而`css`目录中的样式文件则负责定义菜单的外观,包括颜色、字体、边框、背景等。 6. **响应式设计**...

    JavaScript实现鼠标滑过带箭头的纵向3级导航菜单源码

    通常使用`&lt;ul&gt;`和`&lt;li&gt;`元素来表示无序列表,其中`&lt;li&gt;`内的子`&lt;ul&gt;`代表下级菜单。 2. CSS样式:定义菜单的基础样式和过渡效果。这可能包括颜色、字体、边框、背景色、以及在鼠标悬停时的改变。对于箭头,可以使用...

    11组XHTML+CSS导航菜单

    3. 下拉菜单:鼠标悬停时显示下级菜单,节省页面空间。 4. 图标菜单:结合图标和文字,使菜单更具视觉吸引力。 5. 固定定位菜单:始终在屏幕顶部或底部,无论用户滚动页面如何,始终保持可见。 6. 滑动菜单:通过...

    横向二级导航菜单

    通常,一个横向二级导航菜单由一级菜单项组成,这些一级菜单项在鼠标悬停时会显示下级菜单。在这个案例中,我们使用HTML来构建菜单的基础框架,CSS来设置样式,而JavaScript则负责交互逻辑和动画效果。 HTML结构...

    51js,学习js菜单

    5. **三级菜单**:三级菜单通常涉及到更复杂的交互,例如鼠标悬停时显示下一级菜单,点击时显示下下级菜单。这需要精细的事件管理和状态跟踪,确保菜单的层级关系正确展现。 6. **模拟QQ菜单**:QQ风格的菜单往往带...

    jQuery手机端三级联动下拉菜单特效.zip

    当用户点击某个菜单项时,通过`.show()`和`.hide()`方法控制下级菜单的显示和隐藏。如果涉及到三级联动,还需要判断当前选中项,决定哪些子菜单应该被展开。 5. 可能的优化:考虑性能问题,可以使用事件委托来绑定...

    树形导航菜单例子

    它模仿了自然界中的树,根节点代表顶级菜单,而子节点则表示下级菜单。用户可以通过展开或折叠节点来显示或隐藏子级菜单项,这使得大量组织有序的信息能够清晰、高效地呈现。 工作原理: 1. 数据结构:树形导航菜单...

    jquery 竖向下拉三级菜单特效

    2. **CSS样式**:使用CSS来美化菜单,设置字体、颜色、背景、边框等,以及隐藏默认不可见的下级菜单。我们还需要设置`position`属性,以便于通过jQuery控制它们的显示和隐藏。 ```css .menu { list-style: none; ...

    jQuery招聘网站左侧导航分类菜单代码

    例如,箭头图标可能用于指示有下级菜单,或者作为悬停状态的视觉提示。 6. **分层结构**:左侧导航通常用于大型网站,因为它允许用户在不滚动页面的情况下访问多个层级的分类。在这个案例中,二级和三级子分类的...

    javascript经典特效---右侧立体展开菜单.rar

    这种特效能够使网站的菜单项在鼠标悬停或点击时,以立体效果展开,显示下级菜单,增加了视觉吸引力和用户体验。在本案例中,"右侧立体展开菜单.rar"是一个包含实现这一特效的代码和资源的压缩包文件。 首先,我们来...

    JS+CSS鼠标经过显示下拉内容菜单

    在网页设计中,"JS+CSS鼠标经过显示下拉内容菜单"是一种常见的交互效果,用于增强用户体验,使得用户可以通过简单的鼠标悬停操作来查看隐藏的下级菜单项。这种技术结合了JavaScript(JS)和层叠样式表(CSS)的力量...

Global site tag (gtag.js) - Google Analytics