分享收起展开图标，同时请教一个问题

一定

想要类似官网这种收起与展开，能力有限弄了个图标版，先看演示图。






其实最好是svg版的，比较高清，但是变量是$cat[collapseimg]，解析出来是gif尾巴格式的，200行左右，代码是：

1. <img id="category_$cat[fid]_img" src="template/dingzhi_2021_book/dingzhi/$cat[collapseimg]" title="{lang spread}" alt="{lang spread}" onclick="toggle_collapse('category_$cat[fid]');"/>

复制代码

下面分享gif版的图标：


svg版的图标无法上传，想要的可以QQ联系我，然后最后求助：怎么将这个改成SVG版的，模板作者是用的默认啥的，不知道哪里处理的，只知道收起与展开是：【onclick="toggle_collapse('category_$cat[fid]');】。

我知道答案 回答被采纳将会获得1 贡献 已有2人回答

弄月

.tg_no:before
.tg_yes:before

换这个就可以了

一定

弄月 发表于 2025-8-6 13:30
.tg_no:before
.tg_yes:before

你这个咋用？不过我解决了，用CSS+DIV，不用JS，也没用SVG模式，这里分享出来吧，留给后面有缘人。
CSS代码

1. /*板块收起与展开*/
   
2. .toggle-container {
   
3.   display: inline-block;
   
4.   vertical-align: middle;
   
5.   margin-right: 5px;
   
6. }
   
7. .toggle-checkbox {
   
8.   position: absolute;
   
9.   opacity: 0;
   
10. }
    
11. 
    
12. .toggle-label {
    
13.   cursor: pointer;
    
14.   display: inline-block;
    
15.   -webkit-tap-highlight-color: transparent;
    
16. }
    
17. .toggle-switch {
    
18.   position: relative;
    
19.   width: 33px;
    
20.   height: 18px;
    
21.   background-color: #e0e0e0;
    
22.   border-radius: 11px;
    
23.   box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
    
24.   transition: all 0.3s ease;
    
25. }
    
26. .toggle-switch-handle {
    
27.   position: absolute;
    
28.   width: 16px;
    
29.   height: 16px;
    
30.   background-color: white;
    
31.   border-radius: 50%;
    
32.   top: 1px;
    
33.   left: 1px;
    
34.   box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    
35.   transition: all 0.3s ease;
    
36. }
    
37. .toggle-checkbox:checked + .toggle-label .toggle-switch {
    
38.   background-color: #4285f4;
    
39. }
    
40. .toggle-checkbox:checked + .toggle-label .toggle-switch-handle {
    
41.   transform: translateX(15px);
    
42. }

复制代码

DIV代码

1. <!--板块收起与展开-->
   
2. <div class="toggle-container">
   
3.   <input type="checkbox" id="category_$cat[fid]_toggle" class="toggle-checkbox" checked>
   
4.   <label for="category_$cat[fid]_toggle"
   
5.          onclick="toggle_collapse('category_$cat[fid]');"
   
6.          class="toggle-label">
   
7.     <div class="toggle-switch">
   
8.       <span class="toggle-switch-handle"></span>
   
9.     </div>
   
10.   </label>
    
11. </div></span>

复制代码