Question

已使用

Bootstrap 3.x 框架和 jQuery 2.x 库。

我在三个不同的行中有四个div。鼠标悬停时我使用jQuery来改变div高度。

使用z-index和绝对位置中断Bootstrap响应。

使用z-index和.col-xs- *的绝对位置可以提供有效的解决方案。但是，结果不适合移动设备。

＆＃13;

$(function() {
  console.log(">>> jQuery is ready");
  $(".site-box-id-01").mouseenter(function() {
    console.log(">>> mouse enter");
    $(this).stop(true, false).animate({
      height: "500px"
    }, {
      duration: 100
    });
  }).mouseleave(function() {
    console.log(">>> mouse leave");
    $(this).stop(true, false).animate({
      height: "300px"
    }, {
      duration: 100
    });
  });
});

＆＃13;

.site-box {
  width: 300px;
  height: 300px;
  border: 1px solid black;
  background-color: white;
}
.row {
  border: 1px dashed black;
  height: 301px;
  /*      fix row height*/
}
.site-row-id-01 {
  background-color: blanchedalmond;
}
.site-row-id-02 {
  background-color: azure;
}
.site-box-id-01 {
  position: absolute;
  z-index: 1;
}

＆＃13;

<body>
  <div class="container-fluid">
    <div class="row" id="site-row-id-01">
      <div class="col-sm-4">
        <div class="site-box site-box-id-01">Test Box 01</div>
      </div>
      <div class="col-sm-4">
        <div class="site-box site-box-id-01">Test Box 02</div>
      </div>
      <div class="col-sm-4">
        <div class="site-box site-box-id-01">Test Box 03</div>
      </div>
    </div>
    <div class="row row-class-02" id="site-row-id-02">
      <div class="col-sm-4">
        <div class="site-box site-box-id-02">Test Box 04</div>
      </div>
      <div class="col-sm-4">
        <div class="site-box site-box-id-02">Test Box 05</div>
      </div>
      <div class="col-sm-4">
        <div class="site-box site-box-id-02">Test Box 06</div>
      </div>
    </div>
  </div>

</body>

＆＃13;

正常状态

对于桌面

enter image description here

对于移动

enter image description here

期望的结果

对于桌面

enter image description here

对于移动

enter image description here

当前结果

对于桌面

enter image description here （不使用绝对位置和 z-index ）

对于移动

enter image description here （使用绝对位置和 z-index ）

Answer 1

我在http://jsbin.com/fulequ/3/edit处找到了一个我认为符合您需求的解决方案。

首先，你的HTML并没有真正的响应。我将其修改如下。 class="col-xs-6 col-sm-3"在桌面模式下提供4列，在移动视图中提供2列。

   <div class="row" >
     <div class="col-xs-6 col-sm-3">
        <div class="site-box site-box-id-01">Test Box 01</div>
     </div>
     <div class="col-xs-6 col-sm-3">
        <div class="site-box site-box-id-01">Test Box 02</div>
     </div>
     <div class="col-xs-6 col-sm-3" >
        <div class="site-box site-box-id-01">Test Box 03</div>
     </div>
     <div class="col-xs-6 col-sm-3 ">
        <div class="site-box site-box-id-01">Test Box 04</div>
     </div>
  </div>

要在桌面模式下垂直展开块，请将以下CSS类添加到<div class="site-box site-box-id-01">并在mouseleave（）函数中将其删除。

.expand-box{
  z-index:1;
  height: 150px;
  position: absolute;
  background-color: yellow;
}

对于您在上面描述的移动视图，JavaScript必须执行以下操作

设置＆＃34;行＆＃34;的高度div到它的实际高度。
对于每个位置，他们绝对是他们目前所处的位置。
将扩展框CSS类添加到div以放大。

在mouseleave上，JavaScript必须撤消上述步骤。

更改div的高度并设置绝对位置中断Bootstrap响应

正常状态

期望的结果

当前结果

1 个答案: