当单击按钮时容器宽度设置为 100% 时更新 FlexSlider2 宽度

Question

我在一个固定宽度的网站上使用 FlexSlider2，但我正在尝试制作一个用于“全屏”视图的按钮。基本上，按钮所做的只是将主站点的容器 div 更改为 100% 宽度并隐藏其他站点元素。

这是我的按钮功能代码：

    $('.fullscreen-toggle').click(function() {
        $('#container').toggleClass('full-width', 0);
        $('#header').toggleClass('hide', 0);
        $('#menu').toggleClass('hide', 0);
        $('#lower-content').toggleClass('hide', 0);
        $('.fullscreen-toggle span').toggle();
    });

我遇到的问题是 FlexSlider 仅在调整窗口大小或进入和离开焦点时（通过更改浏览器选项卡）调整其图像/幻灯片宽度。单击按钮时，我一直无法找到“重新加载” FlexSlider 的方法，因此图像是全宽的。现在，当单击按钮时，一次显示多张幻灯片，如下所示：http://img202.imageshack.us/img202/5308/flexsliderresizeissue.jpg

我尝试过的事情：

• 此插件：benalman (com) /projects/jquery-resize-plugin/（已删除链接以满足最低链接要求）
• 使用 .load() 尝试刷新脚本（不要认为这是 .load 的预期功能，但我还是尝试了 :S）
• 在 .click() 函数中再次包含 $('#slider').flexslider(); 调用
• 上述内容的其他变体，也许有些我什至不记得了！我已经有一段时间了

抱歉，我无法直接链接到该网站，但如果您需要更多信息，请告诉我。

更新 将$('ul.slides li').css("width", $('#container').width() + "px"); 添加到我的 .click 函数可以使图像大小合适，但是仍然同时显示两张幻灯片。这次他们被完美地分成了两半。

更新 2 Flexslider CSS：http://pastebin.com/zVk82NkK

Answer 1

在 flexslider.css 文件中有这行吗？

.flexslider .slides img {width: 100%; display: block;}

我认为保持width: 100% 每次只滑动一张图片就足够了。