javascript - 如何将可折叠的超赞字体图标附加到嵌套列表的父 li？

Question

我有一个滑动切换嵌套列表 <li>结构如下:

$(function() {
  $('body').on('click', function(e) {
    var element = $(e.target);

    if (element.is('li') == true && element.children('ol').children('li').length >= 1) {
      e.stopPropagation();
      $(e.target).children('ol').slideToggle(function() {});
    }
  })
})

ol.example li {
  display: block;
  margin: 10px 5px;
  padding: 11px;
  border: 1px solid #cccccc;
  color: #0088cc;
  background: #eeeeee;
  cursor: pointer;
}

ol.example ol {
  display: none;
}

ol.example li a:before {
  content: "\f054";
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ol class="example">
  <li><a href="JavaScript:void(0)" style="visibility: visible;">Account</a>
    <ol>
      <li><a href="JavaScript:void(0)" style="visibility: visible;">Account</a></li>
      <li><a href="JavaScript:void(0)" style="visibility: visible;">Account Statement</a></li>
      <li><a href="JavaScript:void(0)" style="visibility: visible;">Account Closure</a></li>
      <li><a href="JavaScript:void(0)" style="visibility: visible;">Internal Account</a></li>
    </ol>
  </li>
  <li><a href="JavaScript:void(0)" style="visibility: visible;">User</a>
    <ol>
      <li><a href="JavaScript:void(0)" style="visibility: visible;">User Management</a>
        <ol>
          <li><a href="JavaScript:void(0)" style="visibility: visible;">Reset User Password</a></li>
          <li><a href="JavaScript:void(0)" style="visibility: visible;">Role and Right</a></li>
        </ol>
      </li>
      <li><a href="JavaScript:void(0)" style="visibility: visible;">List Logged-in User</a></li>
      <li><a href="JavaScript:void(0)" style="visibility: visible;">User</a></li>
    </ol>
  </li>
  <li><a href="JavaScript:void(0)" style="visibility: visible;">LogOut</a></li>
</ol>

因此，我尝试应用 CSS 或 Javascript 将超赞字体图标附加到父列表 <li>因为它被点击滑动切换，但到目前为止没有任何运气。

有什么 CSS 或 Javascript 方法可以实现这种效果吗？

Answer 1

您可以使用 CSS 内容来实现这一点。使用伪选择器添加类 toggle-tab-plus 和 toggle-tab-minus(在 span 内，因为您希望它们位于同一行)。切换时切换它们。如果你想让它们看起来像特定的东西，你也可以在内容中使用小图像。我使用这种技术在这个网站上做左导航。我使用“x”而不是“-”来折叠和“+”来展开。 https://www.simplystamps.com/address-stamps/view-all以下是上述示例的 js fiddle 。

jsfiddle.net/yash009/5khotxu0/2 Working js fiddle for the example above

<div>your Div<span class="toggle-tab-plus"></span></div>

/*css*/
    .toggle-tab-plus:before {
        content: "+";
    }
    .toggle-tab-minus:before {
        content: "-";
    }