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

Question

我用我想要达到的目标创造了一个JSfiddle。基本上，我使用https://materializecss.com/collapsible.html中的可折叠组件，但尝试扩展以使其成为嵌套的可折叠组件。具体来说，我试图根据URL路径打开右链接上的可折叠。

根据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

你有。

问题是Collapsible没有刷新（https://github.com/jquery/jquery-mobile/issues/3771）;因此，您必须重新实例化它。

因此，您唯一需要做的就是找到父项目符号并添加“活动”类，然后再次实例化Collapsible以使其正常工作。

$(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>