猫头鹰旋转木马在单击时更改元素的内容

Question

我在使用 owl carousel 时遇到问题，直到现在我不知道如何解决它。 因此，在图像 1 上，您可以看到滑块的正常行为。在第二个上，您将看到它的扩展功能。这个想法很简单，当用户点击元素时，他应该展开它，但是当元素展开时，所有其他元素都变成了 2 行，我不想发生。

图 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');
                }
            })
        })
    })