Flexslider 最初隐藏时无法正常工作答案

【问题标题】：Flexslider not working properly when initially hiddenFlexslider 最初隐藏时无法正常工作
【发布时间】：2013-09-13 11:28:01
【问题描述】：

最初我隐藏了我的 flexslider，直到用户单击链接然后它才会打开。但是由于某种原因，在我调整浏览器窗口之前，滑块在显示后将无法工作，这很奇怪！当我不隐藏 flexslider 时，它工作正常。下面是我用来打开和关闭 flex 滑块的 CSS、HTML 和 jquery。任何熟悉 flex 滑块并且会知道为什么会发生这种情况的人？谢谢！

CSS

section#hotspots .dropdown-area {   
    width: 100%;
    float: left;
    display: none;
}

HTML

<h1>Hot Spots <span class="toggle-button"></span></h1>

<section class="dropdown-area">
    <div class="flex-container">
        <div class="flexslider" id="secondary-slider">
            <ul class="slides">
                <li><img src=
                "%3C?php%20bloginfo('template_directory');%20?%3E/images/212/Portland-1.jpg"></li>

                <li><img src=
                "%3C?php%20bloginfo('template_directory');%20?%3E/images/212/Portland-2.jpg"></li>

                <li><img src=
                "%3C?php%20bloginfo('template_directory');%20?%3E/images/212/Portland-3.jpg"></li>
            </ul>

            <ul class="flex-control-nav">
                <li>
                    <a href="">LOLA COFFEE</a> /
                </li>

                <li>
                    <a href="">PUBLIC MARKET CAFE</a> /
                </li>

                <li>
                    <a href="">MATT'S BIG BREAKFAST</a> /
                </li>
            </ul>
        </div><!--End Flexslider-->
    </div><!--End Flex-container-->
</section>

$(window).load(function() {
$("#hotspots .toggle-button").click(function() {
    $("#hotspots .dropdown-area").slideToggle("slow");
    $("#hotspots span").toggleClass("toggle-button close");
});
});

【问题讨论】：

能否包含用于隐藏和显示 flexslider 的代码？
这是您使用的 flexslider？ woothemes.com/flexslider

标签： jquery flexslider

【解决方案1】：

我假设您使用的是最新版本的 flexslider，在这种情况下您可以使用更高效的 setup()。我还将创建一个单独的事件来在第一次单击 .toggle 按钮时运行 setup() 函数。

类似这样的：

$toggleButtons = $('#hotspots .toggle-button');

//execute once, then remove this event
$toggleButtons.on('click.flexSetup', function() { 
   $('.flexslider').data('flexslider').setup();
   //remove this click event
   $toggleButtons.off('click.flexSetup');
});

//your regular click events
$toggleButtons.on('click', function() { 
    $("#hotspots .dropdown-area").slideToggle("slow");
    $("#hotspots span").toggleClass("toggle-button close");
});

当然，如果您想要快速而肮脏的解决方案，您可以只使用绝对定位而不是隐藏 flexslider。

section#hotspots .dropdown-area {  
   position: absolute; left: -10000px;
}

当你想“显示”flexslider 时，只需将 position 和 left 属性设置为默认 css 值。（position: static & left: auto 在你的情况下）

【讨论】：

【解决方案2】：

对我来说，在手风琴/折叠的点击事件上调整 .flexslider 的大小

$('.acordeon-trigger').click(function () {
     // here all your accordion stuff
     $('.flexslider').resize(); // this is it
});

【讨论】：

这应该是公认的答案。谢谢 odam.fm，你拯救了我的一天

【解决方案3】：

这是因为 flexslider 在页面加载时初始化但包含隐藏内容。所以你只需要在切换点击时初始化 flexslider：

$(window).load(function() {
  var fs_init = 0; //init var
  $("#hotspots .toggle-button").click(function () {
      $("#hotspots .dropdown-area").slideToggle("slow");
      $("#hotspots span").toggleClass("toggle-button close");
      if (fs_init == 0) {fs_init++; //to prevent other initializations
        $('.flexslider').flexslider({
            animation: "slide" //enter you params here
        });            
      }
  });
});

注意：不要初始化滑块两次，只是从切换事件，而不是 onLoad

【讨论】：