Question

我想创建三个包含一些短文本的框，当您单击其中一个框时，它将在页面的整个宽度上展开并显示整个内容。然后可以通过点击某种图标来关闭它。

我创建了一个gif，你可以看到我的意思。 GIF

到目前为止，我已经在jsfiddle

上找到了基本结构

当您单击一个框时，每次打开所单击框内容的框-3内容。我也不知道如何关闭打开的盒子。

你可以用css在gif中看到的动画是否需要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获得结果：

＆＃13;

$('.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);
   
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

我把开箱蓝色更好地注意到了。这必须通过css改为红色。

Answer 2

更新了你的小提琴：

编辑2：
现在它应该在您单击该框时重置。

P.S。单击效果的第二个框 P.P.S.效果显示不正确，因为页面在JSFiddle中自动收缩。尽管如此，如果你在其他地方尝试它并且它不起作用，请认为我被证明是错误的！

编辑：
更新了扩展已点击元素的答案。

https://jsfiddle.net/bszv7f90/9/

＆＃13;

$(".row.boxes-container .box").click(function(e) {
  $(this).children().each(function(i) {
    if ($(this).attr('class') == 'box-content-full') {
      $(this).toggleClass("exp");
    }
  });
  $(".box-content-full").toggleClass("open");
  $(".box-content").toggleClass("clicked");
});

＆＃13;

.container {
  max-width: 600px;
}
.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 {
  padding: 30px;
  background-color: #f03939;
}
.box-content.clicked {
  display: none;
}
.box-content-full.open {
  position: absolute;
  max-width: 0%;
  width: 0%;
  z-index: 2;
  display: none;
  transition: width 1s;
}
.box-content-full.open.exp {
  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;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

＆＃13;

现在应该扩大。我保留了您的代码以进行快速复制粘贴。

单击HTML扩展框

2 个答案: