如何將可折疊字體真棒圖標附加到嵌套列表的父級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

要切換圖標，只需添加一個父類來區分折疊狀態和展開狀態，並為兩者使用不同的圖標即可。