0

我一直试图在 bxslider 幻灯片中放置一个引导可折叠元素，但它根本不起作用。

任何想法如何解决这一问题？

我已经在我的网站上上传了示例代码：

http://www.nicksotiriadis.gr/test-folder/temp-bx.html

4

2 回答 2

1

好吧，我发布新答案的原因是因为 Daved 很友善地解释了导致问题的原因，所以我对其进行了更多研究，这是我的结论。

Bxslider 有一个infiniteLoop 选项，如果设置为false，则不会创建幻灯片的任何克隆，因此IDS 保持唯一。

现在折叠似乎没有打开，只是因为 bxslides 没有动态高度（与adaptiveHeight不同，它在将幻灯片带入屏幕之前读取幻灯片的高度）。如果您在幻灯片下方添加一些内容，您会看到可折叠组件确实有效。

对于我的示例中的第二张幻灯片，当您第一次单击它时，它会打开，然后如果您转到上一张幻灯片，然后返回它adaptiveHeight 调整以使其显示。

所以，现在唯一需要的是动态幻灯片高度——我已经在 gitHub 上发出请求，我希望它被听到——它非常有用，我相信其他人也会使用它。

用上面的代码更新了我的示例：

http://www.nicksotiriadis.gr/test-folder/temp-bx.html

于 2013-11-13T13:04:48.717 回答
0

在代码中，看起来 bxSlider 正在为没有数据和事件的滑块进行元素的 .clone。如果是这种情况，则折叠不起作用，因为 Bootstrap 事件处理程序不在克隆的元素上。

最好的方法可能是使用“onSliderLoad”事件直接从 Bootstrap 调用折叠。

示例（更新）：

$(function () {
    var sideslider = $('#sideslider').bxSlider({
        adaptiveHeight: true,
        touchEnabled: false,
        pager: false,
        slideWidth: 270,
        onSliderLoad: function () {
            $('.bx-viewport').on('click','a.collapse-toggle', function () {
                //var ele = $(this).parent().find('.collapse-box'); // element to to collapse (UL)
                //ele.collapse('toggle');
                $(this).parent().find('.collapse-box').collapse('toggle');    // one liner
            });
        }
    });
});

编辑：由于我指出的克隆，我再看了一下，并通过使用 ID 的旧示例意识到这是一个坏主意。多哈

这是创建的标记： http: //screencast.com/t/yRnW1zUA

您不能重复使用 ID，因为它们通过规范在每页每个项目中都是唯一的。虽然单击 DROP 按钮会使其工作，但您无法看到它，因为它发生在与 ID 匹配的第一个元素上。这通常隐藏在幻灯片中。

视频示例：http ://screencast.com/t/AI0Ex2GIsP - 观看左侧的黄色亮点。这些是正在发生的变化，请注意它们不是您看到的元素。

不过，在查看时，我也意识到我之前在尝试使用 Bootstrap 崩溃时遇到了另一个问题 - 如果您通过 JS 触发，请不要使用 Bootstrap 类和数据切换属性，因为它们会发生冲突。

话虽如此，最终结果是删除 Bootstrap 数据切换属性和类，放入您自己的并引用该幻灯片中的元素。它比听起来简单得多。并且因为您已经有了侧滑器，所以您可以使用“on”将“单击”绑定到该侧滑块，而无需使用 onSliderLoad 事件。

小提琴：http: //jsfiddle.net/yJTJf/2/

于 2013-11-11T15:09:15.633 回答