Question

我在div内有一个猫头鹰轮播，该div用display：none隐藏了；然后通过jquery将其切换为触发状态。

HTML / PHP结构：

title

CSS：

<em class="otherdemoicon"></em>

<div class="otherdemos">
    <div class="container">
        <div class="has-carousel" data-items="4" data-loop="true" data-dots="true" data-auto="false" data-navs="false">
            <?php foreach ($list as $item) : $images = json_decode($item->images); ?>
                <div class="item text-center">
                    <a href="<?php echo $item->link; ?>" itemprop="url">
                        <img src="<?php echo $images->image_intro ?>" alt="client" />
                        <?php echo $item->title; ?>
                    </a>
                </div>
            <?php endforeach; ?>
        </div>
    </div>
</div>

触发器div脚本：

.otherdemos {
    position: fixed;
    width: 100%;
    background: #111;
    left: 0;
    right: 0;
    top: 50px;
    border-top: 1px solid #222;
    display: none;
    padding: 15px 0;
}

猫头鹰轮播的jQuery脚本：

(function ($) {
    $(document).ready(function () {
        $('.otherdemoicon').click(function () {
            $('.otherdemos').toggle();
        });
})(jQuery);

问题在于，display：none导致猫头鹰在触发时无法正确调整div中项目的大小。

出于某些原因，我不想使用不透明度：0/1和高度：0 / auto，所以我尝试在触发时刷新轮播，但无济于事：

(function ($) {
    //Carousel
    var $has_carousel = $('.has-carousel');
    if ($has_carousel.length > 0) {
        $has_carousel.each(function () {
            var $self = $(this);
            var c_item = ($self.data('items')) ? $self.data('items') : 4;
            var c_item_t = (c_item >= 3) ? 3 : c_item;
            var c_item_m = (c_item_t >= 2) ? 2 : c_item_t;
            var c_delay = ($self.data('delay')) ? $self.data('delay') : 6000;
            var c_auto = ($self.data('auto')) ? true : false;
            var c_loop = ($self.data('loop')) ? true : false;
            var c_dots = ($self.data('dots')) ? true : false;
            var c_navs = ($self.data('navs')) ? true : false;
            var c_ctr = ($self.data('center')) ? true : false;
            var c_mgn = ($self.data('margin')) ? $self.data('margin') : 30;
            var c_animateOut = ($self.data('animateOut')) ? $self.data('animateOut') : 'fadeOut';
            $self.owlCarousel({
                navText: ["<i class='fa fa-angle-left'></i>", "<i class='fa fa-angle-right'></i>"],
                items: c_item, loop: c_loop, nav: c_navs, dots: c_dots, margin: c_mgn, center: c_ctr, animateOut: c_animateOut,
                autoplay: c_auto, autoplayTimeout: c_delay, autoplaySpeed: 300,
                responsive: {0: {items: 1}, 480: {items: c_item_m}, 768: {items: c_item_t}, 1170: {items: c_item}}
            });
        });
    }
})(jQuery);

有什么建议吗？

div显示内的猫头鹰轮播：无任何作用

0 个答案: