Question

我想创建一个具有特定行为的下拉手风琴：

每次显示手风琴时，执行AJAX请求以获取所有项目信息;
部署下拉列表时，必须显示第一支手风琴;
每次用户点击手风琴项目时，点击的项目必须关闭，下一个项目应该打开;
通过点击最终手风琴中的项目，应该关闭下拉列表。

我首先创建了下拉列表。请点击转速表：

这是javascript：

$(window).ready(function () {

    // Collapse accordion every time dropdown is shown
    $('.dropdown-accordion').on('show.bs.dropdown', function (event) {
        $(this).find('.dropdown-menu').first().stop(true, true).slideDown();
        var accordion = $(this).find($(this).data('accordion'));
        accordion.find('.panel-collapse.in').collapse('hide')
    });

    // Collapse accordion every time dropdown is shown
    $('.dropdown-accordion').on('shown.bs.dropdown', function (event) {
        //Afficher le collapse commune
        $("#collapseCommune").collapse('show');
    });

    $('.dropdown-accordion').on('hide.bs.dropdown', function () {
        $(this).find('.dropdown-menu').first().stop(true, true).slideUp();
    });

    // Prevent dropdown to be closed when we click on an accordion link
    $('.dropdown-accordion').on('click', 'a[data-toggle="collapse"]', function (event) {
        event.preventDefault();
        event.stopPropagation();
        $($(this).data('parent')).find('.panel-collapse.in').collapse('hide')
        $($(this).attr('href')).collapse('show');
    })

    $(".dropdown-accordion #collapseCommune").on("show.bs.collapse", function () { // Occurs when the collapse commune is shown
        var element = $(this)
        $(".dropdown-accordion #collapseCommune > .panel-body").empty();
        $.ajax({
            url: "somewhere",
            method: 'GET',
            datatype: "json",
            timeout: 5000,
            beforeSend: function () {
                //LOADING
                element.append("<div class='loader'></div>")
            },
            success: function (res) {
                //ENQUEUE CHART
                console.log(res);
                element.find(".loader").remove();
                res.forEach(function (element) {
                    addItemToAccordion($(".dropdown-accordion #collapseCommune > .panel-body"), element, "accordion-commune");
                })
            },
            error: function (err) {
                //SHOW ERROR
                //element.find(".loader").remove();
            }
        });
    })
})

但我坚持其余的，主要是因为创建一个组件可能会更好，但我不知道如何开始。

请建议一个与上述类似的模块。

带有旅行逻辑组件的手风琴下拉菜单

0 个答案: