如何将可折叠字体真棒图标附加到嵌套列表的父级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（在跨度内，因为您希望它们位于同一行）。 并在切换时切换它们。 如果您希望小图像看起来像特定的图像，也可以在内容中使用小图像。我使用此技术在该网站上进行了左侧导航。 我用“ x”代替“-”来折叠，而用“ +”来扩展。 https://www.simplystamps.com/address-stamps/view-all以下是上述示例的js小提琴。

jsfiddle.net/yash009/5khotxu0/2 以上示例的工作js小提琴

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

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

Answer 2

@Yashchaturvedi是的，我可以通过jquery .toggleClass()来管理此最终结果，如下所示：

 $(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() { $(e.target).closest('li').find('a:first').toggleClass('red'); }); } }) }) 

 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"; } .red { color: red; } 

 <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> 

刚好接近我想要的状态，但是我仍然无法将图标附加到切换的每个状态，刚才我以red类为例。 感谢任何建议，谢谢。

Answer 3

您需要正确指定字体系列以显示图标。 仅需更改即可显示代码。

ol.example li a:before {
  font-family: "FontAwesome";
  content: "\f054";
}

为了使其更容易，直接使用font-awesome提供的类。 在他们的文档中找到所需的信息： https : //fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use

要切换图标，只需添加一个父类来区分折叠状态和展开状态，并为两者使用不同的图标即可。