为相同的效果缩小相同 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 都相同，称为 "menu"（从 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

我通常使用 class 选择器来做到这一点。添加一个 class "menu" 来回显菜单元素：

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

那么Select就是这样：

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

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

Answer 2

刚刚完成您的代码，我通过添加一两个东西对其进行了一些改进。所以就这样了.. 虽然你没有提供 css 或任何我快速设计的样式以便能够完成工作。

CSS

    <style>
        div[id^="menu"]{
            background: #333;
            margin: 30px;
            float: left;
            width: 100px;
            height: 80px;
        }
        .close {
            display: none;
            color: #fff;
            width: 100%;
            height: 15px;
            background: #4779ff;
        }

        .ThisElementIsClicked .close {
            display: block;
        }
  </style>

HTML

<div class="content">
            <div id="menu1" class="menu-box">
                <div class="blackbar hidden">
                    <a href="javascript:;" class="close" title="Close"><img src="img/cross.png" width="40" height="40" alt="fechar"/></a>
                </div>
            </div>

            <div id="menu2" class="menu-box">
               <div class="blackbar hidden">
                    <a href="javascript:;" class="close" title="Close"><img src="img/cross.png" width="40" height="40" alt="fechar"/></a>
                </div>
            </div>

            <div id="menu3" class="menu-box">
                <div class="blackbar hidden">
                    <a href="javascript:;" class="close" title="Close"><img src="img/cross.png" width="40" height="40" alt="fechar"/></a>
                </div>
            </div>

            <div id="menu4" class="menu-box">
                <div class="blackbar hidden">
                    <a href="javascript:;" class="close" title="Close"><img src="img/cross.png" width="40" height="40" alt="fechar"/></a>
                </div>
            </div>
    </div>

jQuery WITH COMMENTS - 转到下面的无评论版本

$(document).ready(function(){

        //focus on all elements that have an ID starting with the string 'menu'
        //you do that adding '^' before the '=' sign.
        var targetThis = $('div[id^="menu"]');

        //test it yourself to see it's working
        //uncomment this line below to display the info into your console
        //console.log(targetThis);

        targetThis.on('click', function(){

            //set a variable with the element you clicked on
            var thisEl = $(this),
                thisID = thisEl.attr('id').substr(4);

            if(!thisEl.hasClass('ThisElementIsClicked'))
            {
                //if you want all other menu boxes to close while
                //the current clicked menu box is clicked just remove the class for
                //all elements that have the ID starting with the string 'menu'
                //that is the first variable we created before the click event occured
                //uncomment the line below to see the results

                //targetThis.removeClass('ThisElementIsClicked');

                //add the class to the current clicked menu box
                thisEl.addClass('ThisElementIsClicked');

                //remove the hidden class
                //but this should not be made with jQuery but with CSS
                //just style the 'hidden' class based on the parent class that we added on click 'ThisElementIsClicked'
                $('#menu' + thisID).children('.blackbar').removeClass('hidden');

                //now while this box is opened
                //add inside this block of code the script for
                //the closing button
                var closeBtn = thisEl.find('.close');

                closeBtn.on('click', function(e){
                    e.stopPropagation();
                    $(this).parents('#menu' + thisID).removeClass('ThisElementIsClicked');
                    $(this).parents('#menu' + thisID).children('.blackbar').addClass('hidden');
                });


            }

        });

    });

jQuery 没有评论

$(document).ready(function(){

        var targetThis = $('div[id^="menu"]');

        targetThis.on('click', function(){

            var thisEl = $(this),
                thisID = thisEl.attr('id').substr(4);

            if(!thisEl.hasClass('ThisElementIsClicked'))
            {
                //targetThis.removeClass('ThisElementIsClicked');
                thisEl.addClass('ThisElementIsClicked');
                $('#menu' + thisID).children('.blackbar').removeClass('hidden');
                var closeBtn = thisEl.find('.close');

                closeBtn.on('click', function(e){
                    e.stopPropagation();
                    $(this).parents('#menu' + thisID).removeClass('ThisElementIsClicked');
                    $(this).parents('#menu' + thisID).children('.blackbar').addClass('hidden');
                });

            }

        });

    });

希望这对您有所帮助...顺便说一句，您可以选择一次只显示一个框，当您单击一个框时，所有其他框都会关闭。阅读评论。

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

Minify code for same divs for same effect

html

javascript

css

jquery

minify