在桌面视图中,输出是正确的,但在移动视图中,我们希望生成每个div都有自己的描述。
现在我的问题是描述显示在所有四个元素之后,我们希望在移动视图中显示每个div的底部。
任何人都可以通过jQuery帮助我。我试图在jQuery的帮助下使用偏移量和高度,但这是行不通的。
null
$(".trust-datail").hide();
$(".trust-wrap").each(function (i) {
$(this).attr('id', +i);
});
$(".trust-datail").each(function (i) {
$(this).addClass("tab_" + i);
});
$(".trust-wrap").click(function () {
$(".trust-datail").slideUp();
var id = $(this).attr('id');
if ($(".tab_" + id).is(':visible')) {
$(".tab_" + id).slideUp();
}
else {
$(".tab_" + id).slideDown();
}
});
$(".close-new").click(function () {
$(this).parent(".trust-datail").slideUp();
});
.trust-wrap {
border-radius: 5px;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
margin-bottom: 30px;
text-align: center;
transition: all 0.2s ease 0s;
}
.trust-wrap img {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
margin:0 auto;
}
.trust-wrap h4 {
font-weight: bold;
margin: 25px 0;
font-size:15px;
}
.trust-datail {
background: #000;
border-radius: 5px;
margin: auto auto 50px;
padding: 20px;
position: relative;
width: 100%;
}
.close-new {
cursor: pointer;
position: absolute;
right: 20px;
text-align: right;
}
.trust-datail h5 {
color: #fff;
font-size: 18px;
font-weight: bold;
margin: 0 0 15px;
}
.trust-datail p {
color: #fff;
margin: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="member_wrap">
<div class="member_box">
<div class="row">
<div class="col-sm-3 chand">
<div class="trust-wrap" id="8">
<img src="http://lorempixel.com/output/people-q-c-250-250-9.jpg" alt="" class="img-responsive">
<h4>Lorem Ipsum1</h4>
<div class="clearfix"></div>
</div>
</div>
<div class="col-sm-3 chand">
<div class="trust-wrap" id="9">
<img src="http://lorempixel.com/output/city-q-c-250-250-4.jpg" alt="" class="img-responsive">
<h4>Lorem Ipsum2</h4>
<div class="clearfix"></div>
</div>
</div>
<div class="col-sm-3 chand">
<div class="trust-wrap" id="10">
<img src="http://lorempixel.com/output/people-q-c-250-250-9.jpg" alt="" class="img-responsive">
<h4>Lorem Ipsum3</h4>
<div class="clearfix"></div>
</div>
</div>
<div class="col-sm-3 chand">
<div class="trust-wrap" id="11">
<img src="http://lorempixel.com/output/city-q-c-250-250-4.jpg" alt="" class="img-responsive">
<h4>Lorem Ipsum4</h4>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
<div class="trust-datail tab_8" style="display: none;">
<div class="close-new">
<img src="images/close-new.png">
</div>
<h5>Lorem Ipsum1</h5>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries</p>
</div>
<div class="trust-datail tab_9" style="display: none;">
<div class="close-new">
<img src="images/close-new.png">
</div>
<h5>Lorem Ipsum2</h5>
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries</p>
</div>
<div class="trust-datail tab_10" style="display: none;">
<div class="close-new">
<img src="images/close-new.png">
</div>
<h5>Lorem Ipsum3</h5>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries</p>
</div>
<div class="trust-datail tab_11" style="display: none;">
<div class="close-new">
<img src="images/close-new.png">
</div>
<h5>Lorem Ipsum4</h5>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries</p>
</div>
</div>
</div>
null
为您更新了答案
这对你管用。
我所做的是为您创建一个函数,并在$(window).load
和$(window).resize
中调用它-
var cloneFun = function() {
if ($(window).width() <= 420) {
$(".trust-datail").each(function(i) {
var clonId = "#" + i,
clon = $(this).clone();
$(clonId).find('.clearfix').before(clon);
$(this).addClass('mob-none');
});
} else {
$(".trust-datail").removeClass('mob-none');
}
};
$(window).load(function() {
cloneFun();
});
$(window).resize(function() {
cloneFun();
});
此函数检查窗口大小,如果小于420px
,它将复制您的div并将其粘贴到.trust-wrap
中
并且我使用.mob-none
在移动视图中隐藏您的详细信息。
null
$(".trust-datail").hide();
$(".trust-wrap").each(function(i) {
$(this).attr('id', +i);
});
$(".trust-datail").each(function(i) {
$(this).addClass("tab_" + i);
});
$(".trust-wrap").click(function() {
$(".trust-datail").slideUp();
var id = $(this).attr('id');
if ($(".tab_" + id).is(':visible')) {
$(".tab_" + id).slideUp();
} else {
$(".tab_" + id).slideDown();
}
});
$(".close-new").click(function() {
$(this).parent(".trust-datail").slideUp();
});
var cloneFun = function() {
if ($(window).width() <= 420) {
$(".trust-datail").each(function(i) {
var clonId = "#" + i,
clon = $(this).clone();
$(clonId).find('.clearfix').before(clon);
$(this).addClass('mob-none');
});
} else {
$(".trust-datail").removeClass('mob-none');
}
};
$(window).load(function() {
cloneFun();
});
$(window).resize(function() {
cloneFun();
});
.trust-wrap {
border-radius: 5px;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
margin-bottom: 30px;
text-align: center;
transition: all 0.2s ease 0s;
}
.trust-wrap img {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
margin: 0 auto;
}
.trust-wrap h4 {
font-weight: bold;
margin: 25px 0;
font-size: 15px;
}
.trust-datail {
background: #000;
border-radius: 5px;
margin: auto auto 50px;
padding: 20px;
position: relative;
width: 100%;
}
.close-new {
cursor: pointer;
position: absolute;
right: 20px;
text-align: right;
}
.trust-datail h5 {
color: #fff;
font-size: 18px;
font-weight: bold;
margin: 0 0 15px;
}
.trust-datail p {
color: #fff;
margin: 0;
}
.mob-none {
display: none !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="member_wrap">
<div class="member_box">
<div class="row">
<div class="col-sm-3 chand">
<div class="trust-wrap" id="8">
<img src="http://lorempixel.com/output/people-q-c-250-250-9.jpg" alt="" class="img-responsive">
<h4>Lorem Ipsum1</h4>
<div class="clearfix"></div>
</div>
</div>
<div class="col-sm-3 chand">
<div class="trust-wrap" id="9">
<img src="http://lorempixel.com/output/city-q-c-250-250-4.jpg" alt="" class="img-responsive">
<h4>Lorem Ipsum2</h4>
<div class="clearfix"></div>
</div>
</div>
<div class="col-sm-3 chand">
<div class="trust-wrap" id="10">
<img src="http://lorempixel.com/output/people-q-c-250-250-9.jpg" alt="" class="img-responsive">
<h4>Lorem Ipsum3</h4>
<div class="clearfix"></div>
</div>
</div>
<div class="col-sm-3 chand">
<div class="trust-wrap" id="11">
<img src="http://lorempixel.com/output/city-q-c-250-250-4.jpg" alt="" class="img-responsive">
<h4>Lorem Ipsum4</h4>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
<div class="trust-datail tab_8" style="display: none;">
<div class="close-new">
<img src="images/close-new.png">
</div>
<h5>Lorem Ipsum1</h5>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries</p>
</div>
<div class="trust-datail tab_9" style="display: none;">
<div class="close-new">
<img src="images/close-new.png">
</div>
<h5>Lorem Ipsum2</h5>
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries</p>
</div>
<div class="trust-datail tab_10" style="display: none;">
<div class="close-new">
<img src="images/close-new.png">
</div>
<h5>Lorem Ipsum3</h5>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries</p>
</div>
<div class="trust-datail tab_11" style="display: none;">
<div class="close-new">
<img src="images/close-new.png">
</div>
<h5>Lorem Ipsum4</h5>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries</p>
</div>
</div>
</div>