久久久久av_欧美日韩一区二区在线_国产精品三区四区_日韩中字在线

Discuz! 官方交流社區(qū)

標題: 分享收起展開圖標，同時請教一個問題 [打印本頁]
作者: 一定    時間: 2025-8-6 12:13
標題: 分享收起展開圖標，同時請教一個問題

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

(, 下載次數(shù): 3)

(, 下載次數(shù): 3)


其實最好是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版的圖標：
(, 下載次數(shù): 4)
(, 下載次數(shù): 2)
svg版的圖標無法上傳，想要的可以QQ聯(lián)系我，然后最后求助：怎么將這個改成SVG版的，模板作者是用的默認啥的，不知道哪里處理的，只知道收起與展開是：【onclick="toggle_collapse('category_$cat[fid]');】。



作者: 弄月    時間: 2025-8-6 13:30
.tg_no:before
.tg_yes:before

換這個就可以了
作者: 一定    時間: 2025-8-6 14:19
弄月 發(fā)表于 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. }

  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>
復制代碼






歡迎光臨 Discuz! 官方交流社區(qū) (http://www.9999xn.com/) Powered by Discuz! W1.0