如何在活动的嵌套手风琴部分上旋转箭头/人字形/插入符号

时间：2019-05-07 09:33:59

标签： javascript jquery materialize

我试图旋转嵌套Materialize 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之类的东西，但是像Fiddle一样具有嵌套的部分。

1 个答案:

答案 0 :(得分：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>

相关问题
最新问题