我有以下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/