物化CSS无法以编程方式打开可折叠元素

Question

Trying to execute the open() method of on a specific collapsible element inside DOM calling the following function:

vm.openCollapsible = function( projectName )
{

        // This element is the span that contains the project name
        var element = getElementsByText(projectName);
        // We want to reach out its parent which has collapsible as a class and
        // it's 3 elements upwards.
        //console.log(element[0].parentElement.parentElement.parentElement);
        var collapsible_element = element[0].parentElement.parentElement.parentElement;
        var instance = M.Collapsible.getInstance(collapsible_element);
        console.log(instance);
        instance.open(0);
}

I'm sure that I'm selecting the right element because the console.log(instance) is returning me a valid object.

s {el: ul.collapsible.collapsible-accordion, $el: g(1), options: {…}, $headers: g(1), _handleCollapsibleClickBound: ƒ, …}
$el: g [ul.collapsible.collapsible-accordion]
$headers: g [div.collapsible-header.waves-effect.project-toolbar-box]
el: ul.collapsible.collapsible-accordion
options: {accordion: true, onOpenStart: undefined, onOpenEnd: undefined, onCloseStart: undefined, onCloseEnd: undefined, …}
_handleCollapsibleClickBound: ƒ ()
_handleCollapsibleKeydownBound: ƒ ()
__proto__: s

Any ideas?

Answer 1

Use the following command to open the required collapsible element: $('.collapsible').collapsible('open', 0);

The 0 indicates the index, you should change it accordingly.