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

这里有。

问题是可折叠式没有刷新（https://github.com/jquery/jquery-mobile/issues/3771）；因此，您必须重新实例化。

因此，您唯一需要做的就是找到父项目符号并添加“ active”类，然后再次实例化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>

根据路径在活动链接上打开Materialize嵌套可折叠

1 个答案: