我有以下 jquery 代码:
$('#menu1').click(function(e){
$('#menu1').addClass('fullscreen');
if($('#menu1').hasClass('fullscreen')){
$('.barra').removeClass('hidden');
}
});
$('#close').click(function(e){
$('#menu1').removeClass('fullscreen').animate({
width: '200px',
height: '200px'
}, 2500);
});
HTML
<section>
<div class="content">
<div id="menu1">
<div class="blackbar hidden">
<a href="" id="close" title="Close"><img src="img/cross.png" width="40" height="40" alt="fechar"/></a>
</div>
</div>
<div id="menu2">
<!-- quadrado 2 -->
</div>
<div id="menu3">
<!-- quadrado 3 -->
</div>
<div id="menu4">
<!-- quadrado 4 -->
</div>
</div>
</section>
我希望所有 div 都相同,称为“菜单”(从 1 到 4),而不必为相同的过程复制相同的代码和太多行。
所有的 div 都会有 "$('#menu').addClass('fullscreen');"和“$('.barra').removeClass('hidden');”。有任何帮助或指导吗?
如何实现?
CSS
section{ //"menu" alignment center
position: absolute;
width: 100%;
height: 100%;
top: 50%;
bottom: 50%;
text-align: center;
}
.content{
position: relative;
display: inline-block;
width: 420px;
height: 200px;
margin-top: 9%;
}
#menu1, #menu2, #menu3, #menu4{
width: 200px;
height: 200px;
}
#menu1.fullscreen{
top: 0;
left: 0;
z-index: 9;
position: fixed;
width: 100%;
height: 100%;
background: #131313;
color: #fff;
}
最佳答案
我通常使用类选择器来做到这一点。 添加一个类“菜单”来回显菜单元素:
<div id="menu2" class="menu">
<!-- quadrado 2 -->
</div>
然后像这样选择它:
$('.menu').click(function(e){
$(this).addClass('fullscreen');
if($(this).hasClass('fullscreen')){
$('.barra').removeClass('hidden');
}
});
jQuery 选择器 $(this)
引用被点击的元素。
关于javascript - 为相同的效果缩小相同 div 的代码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30015377/