Bootstrap 3.x 框架和 jQuery 2.x 库。
div在三个不同的行。我使用jQuery来改变div的高度,当鼠标悬停。
使用z-index和绝对位置打破Bootstrap响应性。
使用z-index和绝对位置.col-xs- *可以提供一个工作解决方案。但是,结果不适合移动设备。
$(function console.log(>>> jQuery is ready); $(。site-box-id-01)。mouseenter(function(){console.log(> ); $(this).stop(true,false).animate({height:500px},{duration:100});})。mouseleave(function(){console.log(> > mouse leave); $(this).stop(true,false).animate({height:300px},{duration:100});});}); / pre> .site-box {width:300px; height:300px; border:1px solid black; background-color:white;}。row {border:1px black 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 :绝对z-index:1;}
< body& < div class =container-fluid> < div class =rowid =site-row-id-01> < div class =col-sm-4> < div class =site-box site-box-id-01>测试框01< / div> < / div> < div class =col-sm-4> < div class =site-box site-box-id-01>测试框02< / div> < / div> < div class =col-sm-4> < div class =site-box site-box-id-01>测试框03< / div> < / div> < / div> < div class =row row-class-02id =site-row-id-02> < div class =col-sm-4> < div class =site-box site-box-id-02>测试框04< / div> < / div> < div class =col-sm-4> < div class =site-box site-box-id-02>测试框05< / div> < / div> < div class =col-sm-4> < div class =site-box site-box-id-02>测试框06< / div> < / div> < / div> < / div>< / body>
正常状态 桌面版
For Mobile
所需结果 桌面版
>
For Mobile>
当前结果 桌面版(不使用绝对定位和 z -index )
For Mobile(使用绝对定位和 z-index )
解决方案我在 http:// jsbin上有一个解决方案。
首先,你的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>测试框01< / div> < / div> < div class =col-xs-6 col-sm-3> < div class =site-box site-box-id-01>测试框02< / div> < / div> < div class =col-xs-6 col-sm-3> < div class =site-box site-box-id-01>测试框03< / div> < / div> < div class =col-xs-6 col-sm-3> < div class =site-box site-box-id-01>测试框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必须执行以下操作
在鼠标移动时,JavaScript必须撤消上述步骤。
Bootstrap 3.x framework and jQuery 2.x library are been used.
I have four divs in three different rows. I am using jQuery to change the div height when mouse hover.
Use of z-index and absolute position break Bootstrap responsivness.
Using z-index and absolute position with .col-xs-* can provide a working solution. However, the result is not mobile friendly.
$(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 }); }); });.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; }
<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>
The Normal State For Desktop For Mobile The Desired Result For Desktop For Mobile The Current Result For Desktop
(NOT Using Absolute Positon and z-index )
For Mobile(Using Absolute Positon and z-index)
解决方案I have a solution at jsbin/fulequ/3/edit that I think meets your needs.
First, your html wasn't really responsive. I modified it as below. class="col-xs-6 col-sm-3" gives 4 columns in desktop mode and 2 columns in mobile view.
<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>To expand a block vertically in desktop mode, add the following CSS class to the <div class="site-box site-box-id-01">and remove it on mouseleave() function.
.expand-box{ z-index:1; height: 150px; position: absolute; background-color: yellow; }For the mobile view you describe above, the JavaScript has to do the following
On mouseleave, the JavaScript has to undo the above steps.
更多推荐
更改div的高度并设置绝对位置breakButstrap响应
发布评论