Как повернуть стрелку / шеврон / каретку на активной вложенной секции аккордеона

Question

Я пытаюсь повернуть значок в активном разделе вложенного аккордеонного меню Materialise JS.

Значки также должны отображать активный вложенный раздел.

Скрипка здесь https://jsfiddle.net/adburns/zLw256av/10/

$(document).ready(function() {
  $('.collapsible').collapsible();
  $(function() {
    var path = "some-folder/some-link4.aspx";
    var selector = 'a[href="' + path + '"]';
    var links = $(selector);
    links.each(function(index) {
      var link = $(this).addClass('deep-orange-text');
      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()
  });
});

body {
  padding: 1em;
}

.collapsible-header {
  justify-content: space-between;
}

.right {
  margin-right: 0px;
  padding-right: 0px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">



<ul class="collapsible">
  <li>
    <div class="collapsible-header">WS <i class="material-icons right">expand_more</i></div>
    <div class="collapsible-body">
      <ul class="collapsible">
        <li>
          <div class="collapsible-header">WS M <i class="material-icons right">expand_more</i></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">WS P <i class="material-icons right">expand_more</i></div>
          <div class="collapsible-body">
            <ul>
              <li><a href=some-folder/some-link4.aspx>Link 4</a></li>
              <li><a href=some-folder/some-link5.aspx>Link 5</a></li>
              <li><a href=some-folder/some-link6.aspx>Link 6</a></li>
            </ul>
          </div>
        </li>
        <li>
          <div class="collapsible-header">WS S <i class="material-icons right">expand_more</i></div>
          <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
        </li>
      </ul>
    </div>
  </li>
  <li>
    <div class="collapsible-header">HS <i class="material-icons right">expand_more</i></div>
    <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
  </li>
  <li>
    <div class="collapsible-header">SS <i class="material-icons right">expand_more</i></div>
    <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
  </li>
</ul>

Я ищу что-то вроде https://codepen.io/j_holtslander/pen/vMZGxM, но с вложенными секциями, как в моей скрипке.

Answer 1

просто поместите ниже CSS в вашем местоположении CSS.

.collapsible-header > i {
    transition: transform 0.2s ease;
}

.active>.collapsible-header>i {
    transform: rotate(180deg);
}

Вы можете проверить свой фрагмент в моем ответе с вашим решением.

$(document).ready(function() {
  $('.collapsible').collapsible();
  $(function() {
    var path = "some-folder/some-link4.aspx";
    var selector = 'a[href="' + path + '"]';
    var links = $(selector);
    links.each(function(index) {
      var link = $(this).addClass('deep-orange-text');
      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()
  });
});

body {
  padding: 1em;
}

.collapsible-header {
  justify-content: space-between;
}

.right {
  margin-right: 0px;
  padding-right: 0px;
}

.collapsible-header > i {
     transition: transform 0.2s ease;
}

.active>.collapsible-header>i {
     transform: rotate(180deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">



<ul class="collapsible">
  <li>
    <div class="collapsible-header">WS <i class="material-icons right">expand_more</i></div>
    <div class="collapsible-body">
      <ul class="collapsible">
        <li>
          <div class="collapsible-header">WS M <i class="material-icons right">expand_more</i></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">WS P <i class="material-icons right">expand_more</i></div>
          <div class="collapsible-body">
            <ul>
              <li><a href=some-folder/some-link4.aspx>Link 4</a></li>
              <li><a href=some-folder/some-link5.aspx>Link 5</a></li>
              <li><a href=some-folder/some-link6.aspx>Link 6</a></li>
            </ul>
          </div>
        </li>
        <li>
          <div class="collapsible-header">WS S <i class="material-icons right">expand_more</i></div>
          <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
        </li>
      </ul>
    </div>
  </li>
  <li>
    <div class="collapsible-header">HS <i class="material-icons right">expand_more</i></div>
    <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
  </li>
  <li>
    <div class="collapsible-header">SS <i class="material-icons right">expand_more</i></div>
    <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
  </li>
</ul>