Question

我只是尝试在花式框内触发引导手风琴折叠事件。但我不知道怎么做....我有使用jquery-live吗？还是...？

<a class="fancybox" rel="group" href="/Content/Image/Facteur/1.jpg">
   <img class="thumbnail img-responsive" src="~/Content/Image/Facteur/tn/1.jpg">
</a>
<div style="display: none;">
   <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
       simple collapsible
    </button>
    <div id="demo" class="collapse in">...</div>
</div>

<script>
    $(document).ready(function () {

    $(".fancybox").fancybox({

        beforeShow: function () {
           this.title = '<div class="myTitle">' + $(this.element).next('div').html() + '</div>';
        },
        helpers: {
            title: {
                type: 'inside'
            },
            media: {}
        }
    });
});

</script>

Answer 1

好的，我看到的问题是您正在将下一个div复制到fancybox title中。它只复制元素而不复制其属性（bootstrap手风琴功能），因此你必须 clone 传递它们的数据和事件。

然后重命名目标（可折叠）元素的ID（在fancybox title内）以避免ID重复（使用隐藏元素）所以

试试这段代码：

var newTitle;
$(document).ready(function () {
    $(".fancybox").fancybox({
        beforeShow: function () {
            // set variable to next div element
            newTitle = $(this.element).next('div')
            // clone it with properties
            .clone(true, true)
            // change ID to avoid ID duplication
            .find("#demo").attr("id", "demo2").end()
            // change the target to new ID
            .find(".btn.btn-danger").attr("data-target", "#demo2").end()
            // show as html
            .html();
            // override fancybox title
            this.title = '<div class="myTitle">' + newTitle + '</div>';
        },
        helpers: {
            title: {
                type: 'inside'
            },
            media: {}
        }
    });
});

参见 JSFIDDLE

在fancybox中使用bootstrap手风琴

1 个答案: