javascript - 为相同的效果缩小相同 div 的代码

Question

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

Answer 1

我通常使用类选择器来做到这一点。添加一个类“菜单”来回显菜单元素:

<div id="menu2" class="menu">
    <!-- quadrado 2 -->
</div>

然后像这样选择它:

$('.menu').click(function(e){
    $(this).addClass('fullscreen');
        if($(this).hasClass('fullscreen')){
            $('.barra').removeClass('hidden');
        }
});

jQuery 选择器 $(this) 引用被点击的元素。