javascript - 单击时的 HTML 扩展框

Question

我想创建三个带有一些短文本的框，当您单击其中一个框时，它会扩展到页面的整个宽度并显示全部内容。然后可以通过单击某种图标将其关闭。

我创建了一个 gif，以便您明白我的意思。 GIF

到目前为止，我已经了解了 jsfiddle 上的基本结构

当您单击一个框时，它每次都会打开 box-3 内容而不是单击框的内容。我也不知道如何关闭打开的框。

您在 gif 中看到的动画是否可以使用 css 或是否需要 javascriptl？

$(".row.boxes-container .box").click(function (e) {
        $(".box-content-full").addClass("open");
    });


.row.boxes-container{
    position:relative;   
}

.box:hover{
    cursor:pointer;   
}

.box-content{
    padding:30px;
    background-color:#f03939;
}

.box-content-full{
    display:none;   
    width:0%;
    transition: width 1s;
}

.box-content-full.open {
    position: absolute;
    max-width: 100%;
    width: 100%;
    z-index: 2;
    display:block;
    transition: width 1s;

}

.box-content-full.open .inner{
    padding:30px;
    margin-left:15px;
    margin-right:15px;
    background-color: red;

}


<div class="container">
        <div class="row boxes-container">

            <div class="box first">
                <div class="box-content-full">
                    <div class="inner">
                        <div class="inner-header">
                            <span class="close">x</span>
                        </div>
                        <h3>Box 1</h3>
                        <p>Lorem ipsum dolem filum</p>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="box-content">
                        <h3>Box 1</h3>
                    </div>
                </div>
            </div>

            <div class="box second">
                <div class="box-content-full">
                    <div class="inner">
                        <div class="inner-header">
                            <span class="close">x</span>
                        </div>
                        <h3>Box 2</h3>
                        <p>Lorem ipsum dolem filum</p>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="box-content">
                        <h3>Box 2</h3>
                    </div>
                </div>
            </div>

            <div class="box third">
                <div class="box-content-full">
                    <div class="inner">
                        <div class="inner-header">
                            <span class="close">x</span>
                        </div>
                        <h3>Box 3</h3>
                        <p>Lorem ipsum dolem filum</p>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="box-content">
                        <h3>Box 3</h3>
                    </div>
                </div>
            </div>
        </div>
    </div>

Answer 1

我没有使用您的 html 代码，但试图获得尽可能接近您的 gif 的结果:

$('.box').on('click', function() {
    var $element = $(this);
    
    var $openElement = $('<div class="absoluteBox"></div>');
    
    $openElement.css('left', $element.position().left);
    $openElement.css('right', $element.width());
        
    $element.html($openElement);
    
    $openElement.animate({left : 0, width : $('.wrapper').width()}, 500);
   
});

.wrapper {
    position:relative;
    display:inline-block;
}

.box {
    background-color:#CC0000;
    width:150px;
    height:200px;
    display:inline-block;
    margin-right:10px;
 }

.box:last-of-type {
    margin-right:0;
}

.absoluteBox {
    position:absolute;
    background-color:blue;
    height:200px;
    width:150px;
}

.box:hover {
    background-color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="wrapper">
    <div class="box"></div>
    <div class="box">
    </div>
    <div class="box"></div>
</div>

我将开箱框设为蓝色以便更容易被注意到。这当然必须通过 css 更改为红色。