Open Materialize基于路径在活动链接上嵌套可折叠

Question

I've created a JSfiddle with what I'm trying to achieve. Basically, I am using the Collapsible component from https://materializecss.com/collapsible.html but trying to extend so that it is a nested collapsible. Specifically, I am trying to open the collapsible on the right link depending on the URL path.

Open collapsible on active link depending on URL

 $(document).ready(function() { $('.collapsible').collapsible(); var path = "some-folder/some-link2.aspx"; }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <ul class="collapsible"> <li> <div class="collapsible-header"><i class="material-icons">filter_drama</i>WS</div> <div class="collapsible-body"> <ul class="collapsible"> <li> <div class="collapsible-header"><i class="material-icons">filter_drama</i>WS M</div> <div class="collapsible-body"> <ul> <li><a href=some-folder/some-link1.aspx>Link 1</a></li> <li><a href=some-folder/some-link2.aspx>Link 2</a></li> <li><a href=some-folder/some-link3.aspx>Link 3</a></li> </ul> </div> </li> <li> <div class="collapsible-header"><i class="material-icons">place</i>WS P</div> <div class="collapsible-body"> <ul> <li><a href=some-folder/some-link1.aspx>Link 1</a></li> <li><a href=some-folder/some-link2.aspx>Link 2</a></li> <li><a href=some-folder/some-link3.aspx>Link 3</a></li> </ul> </div> </li> <li> <div class="collapsible-header"><i class="material-icons">whatshot</i>WS S</div> <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div> </li> </ul> </div> </li> <li> <div class="collapsible-header"><i class="material-icons">place</i>HS</div> <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div> </li> <li> <div class="collapsible-header"><i class="material-icons">whatshot</i>SS</div> <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div> </li> </ul> 

Answer 1

Here you have.

The issue was that Collapsible doesn't have a refresh ( https://github.com/jquery/jquery-mobile/issues/3771 ); therefore, you must re-instantiate it.

So, the only thing you needed to do is to find the parent bullets and add the class 'active', then instantiate Collapsible again to make it work.

 $(document).ready(function() { $('.collapsible').collapsible(); $('#btn').click(function(){ var path = "some-folder/some-link2.aspx"; var selector = 'a[href="' + path + '"]'; var links = $(selector); links.each(function(index){ var link = $(this).css({"color": "red"}); var parent = link.closest('ul.collapsible > li'); parent.addClass('active'); var grandparent = parent.parents('ul.collapsible > li'); grandparent.addClass('active'); }); // Collapsible doesn't have a refresh. // Just instantiate it again in order to work. $('.collapsible').collapsible() }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <input type="button" id="btn" value="Find URL" /> <ul class="collapsible"> <li> <div class="collapsible-header"><i class="material-icons">filter_drama</i>WS</div> <div class="collapsible-body"> <ul class="collapsible"> <li> <div class="collapsible-header"><i class="material-icons">filter_drama</i>WS M</div> <div class="collapsible-body"> <ul> <li><a href=some-folder/some-link1.aspx>Link 1</a></li> <li><a href=some-folder/some-link2.aspx>Link 2</a></li> <li><a href=some-folder/some-link3.aspx>Link 3</a></li> </ul> </div> </li> <li> <div class="collapsible-header"><i class="material-icons">place</i>WS P</div> <div class="collapsible-body"> <ul> <li><a href=some-folder/some-link1.aspx>Link 1</a></li> <li><a href=some-folder/some-link2.aspx>Link 2</a></li> <li><a href=some-folder/some-link3.aspx>Link 3</a></li> </ul> </div> </li> <li> <div class="collapsible-header"><i class="material-icons">whatshot</i>WS S</div> <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div> </li> </ul> </div> </li> <li> <div class="collapsible-header"><i class="material-icons">place</i>HS</div> <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div> </li> <li> <div class="collapsible-header"><i class="material-icons">whatshot</i>SS</div> <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div> </li> </ul>