Question

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

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

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

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

Answer 1

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

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

现在崩溃SEEM不能打开，只是因为bxslides没有动态高度（不同于adaptiveM在它进入scren之前读取幻灯片高度的adaptiveHeight）。如果您在幻灯片下方添加一些内容，您会看到可折叠实际上有效。

对于我的示例中的第二张幻灯片，当您第一次点击它时，它会打开，然后如果您转到上一张幻灯片，然后返回到它，自适应高度调整以便显示。

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

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

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

Answer 2

在代码中，看起来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的旧示例意识到这是一个坏主意，因为我指出了克隆。 DOH

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

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

视频例如：http://screencast.com/t/AI0Ex2GIsP - 在左侧观看黄色高光。这些是发生的变化，并注意它们不是你看到的元素。

虽然看到了这一点，但我也意识到我之前遇到的另一个问题是尝试使用Bootstrap崩溃 - 如果你通过JS触发，请不要使用Bootstrap类和数据切换属性，因为它们会冲突。

在说完之后，最终结果是删除了Bootstrap数据切换属性和类，放入了自己的内容，并引用了该幻灯片中的元素。它比听起来简单得多。而且因为你已经有了侧滑，所以你可以在不使用onSliderLoad事件的情况下使用“on”绑定“click”。

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

BxSlider和bootstrap可折叠元素问题

2 个答案: