Блог

У меня есть настройка аккордеона с каруселью owl и плавающими элементами. Кажется, что высота и плавающий режим работают только после свертывания содержимого.

Независимо от того, каким способом я пытаюсь выполнить это для дочерних элементов (grid, flex, table, inline-block) — аккордеон ведет себя одинаково.

Как только аккордеон был открыт, все работает так, как ожидалось. В чем здесь проблема?

Я настроил скрипку:https://jsfiddle.net/tkvmhnu8 /

HTML

 <div class="accordion">
  <h3 class="title"data-href="#this">Floating Content</h3>
<div class="content" id="this">
<div class="gallery">
  <div class="image"></div>
  <div class="image v2"></div>
  <div class="image v3"></div>
  <div class="image"></div>
  <div class="image v2"></div>
  <div class="image v3"></div>
  <div class="image"></div>
  <div class="image v2"></div>
  <div class="image v3"></div>
</div>
</div>
</div>
  

CSS

 * {
margin:0;
padding:0;
}

.accordion {
margin: 5px 0;
overflow:hidden;
background:teal;
padding:20px;
}

.accordion.active {
display: block
}

.accordion .title {
display: block;
position: relative;
font-size: 2rem;
line-height: 130%;
color: #FFF
}

.accordion.active .title{
overflow: show;
white-space: normal
}

.accordion.active {
opacity: 1 !important;
}

.disabled {
display:none
}

.accordion .title {
margin: 0;
cursor: pointer
}

.accordion .content {
color: #000;
overflow:hidden;
display: none;
padding:20px 0 0 0
}

.owl-item {
float: left
}

.gallery .image {
display:block;
width:400px;
height:300px;
background:rgba(225,255,255,0.8)
}

.gallery .v2 {
background:rgba(225,255,255,0.6)
}

.gallery .v3 {
background:rgba(225,255,255,0.4)
}
  

JS

 function close_accordion_section() {
    $('.accordion').removeClass('active');
    $('.accordion .content').stop().slideUp(450).removeClass('open');
}

$('.accordion .title').click(function(e) {
    // Grab current anchor value
    var currentAttrValue = $(this).attr('data-href');
    if($(this).parent().hasClass('active')) {
        close_accordion_section();
    } else {
        close_accordion_section();
        $(this).parent().addClass('active');
        $('.accordion '   currentAttrValue).addClass('open').stop().slideDown(450); 
    }
    e.preventDefault();
});

$(".gallery").owlCarousel({
    dots: false,
    nav: false,
  items: 4,
  autoWidth:true
});
  

OwlCarousel нуждается в том, чтобы элементы карусели были видны, чтобы определить их соответствующую ширину.

Поскольку ваши элементы карусели не изначально видны, дочерние элементы укладываются друг на друга вертикально, и поэтому slideDown() вычисляется высота, чтобы быть чем-то чрезвычайно высоким.

Как только вы откроете его и элементы карусели станут видимыми, OwlCarousel применит правильную ширину. Вот почему последующие попытки работают просто отлично.

Решение 1: сохраняйте содержимое видимым при загрузке страницы, чтобы OwlCarousel мог определять ширину — JSFiddle

Удалите display: none; из .accordion .content и спрячьте его после инициализации карусели вместо этого

 .accordion .content {
  color: #000;
  overflow: hidden;
/*display: none;   <---- remove this */
  padding: 20px 0 0 0;
}
  

 $(".gallery").owlCarousel({        //Initialize carousel
  dots: false,
  nav: false,
  items: 4,
  autoWidth: true
});

$(".accordion .content").hide();   //Hide accordion AFTER initializing carousel
  

Решение 2: самостоятельно вычислите и примените ширину — JSFiddle

 var totalWidth = $('.gallery > div')       //Calculate the total width
  .get()
  .reduce((a,i)=> a   $(i).width(), 0);

$(".gallery").owlCarousel({                //Initialize owlCarousel
  dots: false,
  nav: false,
  items: 4,
  autoWidth: true
});

$(".owl-stage").width(totalWidth);         //Apply the width to the stage