Question

我有一个带猫头鹰轮播和浮动元素的手风琴装置。似乎高度和浮动仅在内容折叠后才能起作用。

无论我尝试用哪种方法来完成子元素（网格，伸缩，表格，内联块），手风琴的行为都相同。

打开手风琴后，一切都会按预期进行。这是什么问题？

我已经设置了一个小提琴：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
});

Answer 1

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

具有浮动内容的手风琴-身高问题

1 个答案: