javascript - 缩小相同div的代码以达到相同效果

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