jquery折叠式菜单
时间: 2023-07-31 08:03:45 浏览: 53
以下是一个简单的 jQuery 折叠式菜单示例:
HTML 代码:
```
<div class="menu">
<h3>菜单项1</h3>
<ul>
<li>子菜单项1</li>
<li>子菜单项2</li>
<li>子菜单项3</li>
</ul>
<h3>菜单项2</h3>
<ul>
<li>子菜单项1</li>
<li>子菜单项2</li>
<li>子菜单项3</li>
</ul>
<h3>菜单项3</h3>
<ul>
<li>子菜单项1</li>
<li>子菜单项2</li>
<li>子菜单项3</li>
</ul>
</div>
```
CSS 代码:
```
.menu ul {
display: none;
}
.menu.active ul {
display: block;
}
```
JavaScript 代码:
```
$(document).ready(function() {
$('.menu h3').click(function() {
$(this).parent().toggleClass('active');
});
});
```
在这个示例中,我们使用了 jQuery 的 `toggleClass()` 方法,使点击菜单项时切换 `.active` 类。CSS 中定义了 `.active` 类的样式,以显示子菜单。
相关问题
jquery折叠式菜单一个菜单项
可以使用jQuery的.slideToggle()方法来实现折叠式菜单。下面是一个简单的例子,其中只有一个菜单项:
HTML代码:
```
<div class="menu">
<div class="menu-item">
<div class="menu-header">菜单1</div>
<div class="menu-content">菜单内容1</div>
</div>
</div>
```
CSS代码:
```
.menu {
width: 200px;
border: 1px solid #ccc;
}
.menu-header {
background-color: #eee;
padding: 5px;
cursor: pointer;
}
.menu-content {
display: none;
padding: 5px;
}
```
JavaScript代码:
```
$(document).ready(function() {
$('.menu-header').click(function() {
$(this).next('.menu-content').slideToggle();
});
});
```
在这个例子中,当单击菜单项的标题时,它的下一个元素(即菜单内容)将展开或折叠。同时,我们使用CSS样式来设置菜单项和其内容的外观。
jquery折叠式菜单一个菜单项(ul)
可以使用jQuery的`slideToggle()`方法实现折叠式菜单。
首先,HTML结构中要有一个包含菜单项的`ul`标签,如下所示:
```html
<ul class="menu">
<li>菜单项1</li>
<li>菜单项2</li>
<li class="sub-menu">
<a href="#">菜单项3</a>
<ul>
<li>子菜单项1</li>
<li>子菜单项2</li>
<li>子菜单项3</li>
</ul>
</li>
<li>菜单项4</li>
</ul>
```
其中,菜单项3下面有一个子菜单,使用了另一个`ul`标签。菜单项3的`li`标签还加上了一个`sub-menu`的类名,用于后面的CSS样式和jQuery选择器。
接着,在CSS中设置菜单项的样式:
```css
.menu li {
list-style: none;
padding: 10px;
background-color: #eee;
cursor: pointer;
}
.sub-menu ul {
display: none;
}
```
其中,`.menu li`设置了一些基本样式,`.sub-menu ul`设置了子菜单的初始显示状态为`none`。
最后,在jQuery中实现点击菜单项展开或收起子菜单的效果:
```javascript
$(document).ready(function() {
$('.sub-menu > a').click(function() {
$(this).siblings('ul').slideToggle();
});
});
```
其中,`$('.sub-menu > a')`选中菜单项3的`a`标签,`.siblings('ul')`选中它的兄弟`ul`标签(即子菜单),`.slideToggle()`方法实现展开或收起子菜单的效果。
完整示例代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<title>折叠式菜单</title>
<style>
.menu li {
list-style: none;
padding: 10px;
background-color: #eee;
cursor: pointer;
}
.sub-menu ul {
display: none;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function() {
$('.sub-menu > a').click(function() {
$(this).siblings('ul').slideToggle();
});
});
</script>
</head>
<body>
<ul class="menu">
<li>菜单项1</li>
<li>菜单项2</li>
<li class="sub-menu">
<a href="#">菜单项3</a>
<ul>
<li>子菜单项1</li>
<li>子菜单项2</li>
<li>子菜单项3</li>
</ul>
</li>
<li>菜单项4</li>
</ul>
</body>
</html>
```