有四个类名叫part1-pic-bg的盒子。id分别是part1-iconinfo1,part1-iconinfo2,part1-iconinfo3,part1-iconinfo4,在这个大盒子里面分别有一个类名叫part1-iconinfo的小盒子,,id值分别叫part1-iconinfo1-content,part1-iconinfo2-content,part1-iconinfo3-content,part1-iconinfo4-content,最初类名叫part1-iconinfo的盒子是隐藏状态,当点击大盒子的时候,对应的显示各自的小盒子,再次点击任意地方可以隐藏小盒子的html,css,jquery代码
时间: 2024-02-03 17:12:09 浏览: 27
以下是实现的代码:
HTML代码:
```html
<div class="part1-pic-bg">
<div class="part1-iconinfo1" data-target="part1-iconinfo1-content">Icon Info 1</div>
<div class="part1-iconinfo2" data-target="part1-iconinfo2-content">Icon Info 2</div>
<div class="part1-iconinfo3" data-target="part1-iconinfo3-content">Icon Info 3</div>
<div class="part1-iconinfo4" data-target="part1-iconinfo4-content">Icon Info 4</div>
<div class="part1-iconinfo" id="part1-iconinfo1-content">Icon Info 1 Content</div>
<div class="part1-iconinfo" id="part1-iconinfo2-content">Icon Info 2 Content</div>
<div class="part1-iconinfo" id="part1-iconinfo3-content">Icon Info 3 Content</div>
<div class="part1-iconinfo" id="part1-iconinfo4-content">Icon Info 4 Content</div>
</div>
```
CSS代码:
```css
.part1-pic-bg {
display: flex;
flex-wrap: wrap;
}
.part1-iconinfo {
display: none;
width: 100%;
margin-top: 10px;
background-color: #f0f0f0;
padding: 10px;
}
```
jQuery代码:
```javascript
$(document).ready(function() {
$('.part1-pic-bg > div').click(function() {
var target = '#' + $(this).data('target');
$(target).slideToggle();
});
$(document).click(function(event) {
if (!$(event.target).closest('.part1-pic-bg').length) {
$('.part1-iconinfo').slideUp();
}
});
});
```
解释一下代码:
首先,在HTML代码中,我们给每个大盒子都添加了一个data-target属性,用来指定对应的小盒子的id值。
然后,我们在CSS代码中将所有的小盒子都隐藏了起来,并设置了一些样式。
接着,我们使用jQuery来实现点击大盒子显示对应的小盒子的功能。具体实现方式是,当点击大盒子时,我们获取它的data-target属性值,然后根据该值找到对应的小盒子,并使用slideToggle()方法来切换显示和隐藏状态。
最后,我们再通过jQuery来实现点击任意地方隐藏小盒子的功能。具体实现方式是,当用户点击文档中除了大盒子以外的任意地方时,我们就将所有的小盒子都隐藏起来。