分享收起展開圖標，同時請教一個問題

一定

想要類似官網這種收起與展開，能力有限弄了個圖標版，先看演示圖。






其實最好是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人回答

一定

弄月 發表于 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>

復制代碼

弄月

.tg_no:before
.tg_yes:before

換這個就可以了