如何确保始终打开至少1个手风琴?

时间:2019-12-30 19:59:08

标签: javascript jquery bootstrap-4 accordion

我正在使用Bootstrap v4.2.1。 我的手风琴有5个负载。

当用户单击标题时,将显示单击的内容。 当用户再次单击标题时,我将隐藏所单击内容的内容。

我正在尝试防止所有手风琴倒塌。

我的目标是至少打开1个手风琴...

处理该问题的最佳方法是什么?

这就是我所拥有的

ajax

class myClass:

    def data_receive_callback(self, Packet):
        pass

    self.device.add_data_received_callback(self.data_receive_callback) # Should pass both 'self' and 'Packet' here

onClick

function renderCharts(title) {

    var data     = {};
    data.session = sessionName;
    data.type    = flowType;
    data.title   = title;

    console.log(JSON.stringify(data));

    $.ajax({
        method: 'POST',
        url: `/graphs/iframes`,
        crossDomain: true,
        contentType: false,
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('value'),
            "Accept": "application/json",
            "Content-Type": "application/x-www-form-urlencoded",
            "Cache-Control": "no-cache"
        },
        data: data,
        success: function(charts){

            console.log('charts = ', charts);

            $(`.accordion .card-body`).empty();

            for (i = 0; i < charts.length; i++) {

                var rowTitle  = charts[i].accordionTitle.replace(" ", "");
                var colSize   = charts[i].columnSize;
                var rowNumber = numbers[charts[i].row-1];
                var chartName = charts[i].chart;
                var iFrameUrl = charts[i].iFrameUrl + '&from=now-' + interval + '&to=now&refresh=30s';

                var iframe = `
                <div class="col-sm-${colSize}">
                <iframe id="${chartName}" src="${iFrameUrl}" width="100%" height="451px" frameborder="0"></iframe>
                </div>
                `;

                $(`.accordion .${rowNumber} .card-body`).append(iframe).fadeIn(1000);
                $(`div#${rowTitle} div.collapse`).addClass('show');
                $(`div#${rowTitle} div iframe#${chartName}`).attr("src",`${iFrameUrl}`);

                console.log('%c -------->> RUN <<--------', "color: green;");


            }

        },
        error: function(jqXHR, textStatus, errorThrown) {
            console.log(JSON.stringify(jqXHR));
            console.log("AJAX error: " + textStatus + ' : ' + errorThrown);
        }
    });
}

我什至尝试

$('body').delegate('h5 button', 'click', function() {

    dataTarget = $(this).attr("data-target");
    dataTitle = $(this).attr("data-title");

    $(dataTarget).on('show.bs.collapse', function () {
        console.log($('.collapse.show').length);
        renderCharts(dataTitle)
    });

});

0 个答案:

没有答案