javascript - Owl Carousel 单击时更改元素的内容
问题描述
我的猫头鹰旋转木马有问题,直到现在我不知道如何解决它。因此,在图像 1 上,您可以看到滑块的正常行为。在第二个上,您将看到它的扩展功能。这个想法很简单,当用户点击元素时,他应该展开它,但是当元素展开时,所有其他元素都变成 2 行,我不想发生这种情况。
还有一个元素的源代码
<div class="element box-shadow">
<div class="child">
<div class="row">
<div class="col-xs-12 col-md-8">
<span>05.</span>
<h3>Graphic Designer</h3>
<p class="inventive">Inventive Studio</p>
<p class="view-more">View more <img src="assets/images/view-more.svg" /></p>
</div>
<div class="col-xs-12 col-md-4 portfolio-image" >
<img src="assets/images/inventive-small-img.png" />
</div>
</div>
</div>
<div class="parent hidden">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="row">
<div class="col-xs-12 col-md-8">
<div class="row " style="margin-bottom: 15px;" >
<div class="col-xs-12 col-md-3">
<img src="assets/images/inventive-small-img.png" style="width:34px" class="rounded-circle">
</div>
<div class="col-xs-12 col-md-9 text no-padding" >
<h3>Graphic Designer</h3>
<p class="inventive">Inventive Studio</p>
</div>
</div>
</div>
<div class="col-xs-12 col-md-4 social-el" style="padding-left:0;">
<div class="stars">
<img class="mr-2" src="assets/images/full_star.svg" />
<img class="mr-2" src="assets/images/full_star.svg" />
<img class="mr-2" src="assets/images/half_star.svg" />
<img class="mr-2" src="assets/images/empty_star.svg" />
<img src="assets/images/empty_star.svg" />
</div>
</div>
</div>
<img src="assets/images/inventive-studio-img.png" class="img-fluid">
<div class="content">
<p >Designing and producing catalogs, sales sheets, proposals, scenario illustrations, brochures, posters, custom displays for trade shows and in-house exhibits and all others items.</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<a class="view-less" href="#"><img src="assets/images/view-more.svg"/> View Less</a>
</div>
<div class="col-xs-12 col-md-6">
<div class="stars">
<img src="assets/images/Facebook.svg"/>
<img class="mr-10" src="assets/images/twitter.svg"/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
也将分享和jquery代码
$(".owl-carousel").owlCarousel({
margin:10,
loop: true,
autoWidth: true,
items:3,
rewind: true,
autoplay: true,
responsiveClass:true,
});
$('.work').each(function(i, el) {
$parent = $(el);
$('.element', $parent).each(function(i, item) {
$element = $(item)
$element.on('click', function(e) {
$current = $(this)
console.log($current)
if ($('.parent', $current).hasClass('hidden')) {
$('.parent', $current).removeClass('hidden');
$current.addClass('expand-element');
$current.css('border-radius', 10)
$('.child', $current).addClass('hidden');
} else {
$current.removeClass('expand-element');
$('.parent', $current).removeClass('visible').addClass('hidden');
$current.css('border-radius', 20)
$('.child', $current).removeClass('hidden');
}
})
})
})
解决方案
推荐阅读
- nginx - Gunicorn:无法激活服务错误
- c - 试图绕开一些非阻塞的 mpi 行为
- reactjs - react.js 中的基本客户端服务器交互
- javascript - 使用click提交ajax表单数据
- laravel - 混合清单不存在 - 在 Hostgator 共享主机中部署 laravel 时 Laravel Fortify Jetstream 登录/注册问题
- python - 数据框:如何从 DatetimeIndex 获取 Period 对象列(日历+会计年度和月份)?
- reactjs - 如何解决 Apollo 的“在上下文中找不到“客户端”...”问题?
- python - Mypy: Generic container with some methods only valid if extra protocols apply
- sql - 单个 SELECT 请求中的 Fusion 2 id 列
- php - OAuth 2.0 客户端未返回 JSON Web 令牌