Блог

Главная - Вопросы по программированию - Открыть материализовать вложенный складной файл по активной ссылке на основе пути

Открыть материализовать вложенный складной файл по активной ссылке на основе пути

#javascript #jquery #materialize

#javascript #jquery #материализовать

Вопрос:

Я создал JSfiddle с тем, чего я пытаюсь достичь. В принципе, я использую разборный компонент изhttps://materializecss.com/collapsible.html но пытаюсь расширить так, чтобы это был вложенный складной. В частности, я пытаюсь открыть collapsible по правой ссылке в зависимости от пути URL.

Открыть collapsible по активной ссылке в зависимости от 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>

Ответ №1:

Вот что у вас есть.

Проблема заключалась в том, что у Collapsible нет обновления (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>

Комментарии:

1. Большое спасибо, это именно то, что я искал! Однако у меня есть одна проблема. Я немного изменил код, чтобы функция выполняла загрузку страницы. Я также изменил путь к этому: var path = window.location.pathname; который возвращает правильную папку / страницу, однако URL-адреса, которые у меня есть локально, имеют разные относительные каталоги, поэтому они либо начинаются с .. / или .. / ../ Есть идеи, как я могу заставить это работать с вышеуказанным? Еще раз спасибо @acarlstein

2. хорошо — я изменил все ссылки на один и тот же относительный уровень .. / ../ и добавил это в: var path = '../..' window.location.pathname; и это, кажется, работает. Еще раз спасибо

3. @Burns Я рад, что это помогло вам. Не забудьте проголосовать 😉