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

惧愁人 · 发表于 2025-8-7 07:41:52

马上注册，免费下载更多dz插件网资源。

您需要登录才可以下载或查看，没有账号？立即注册

×

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

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

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

<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版的图标：
分享收起展开图标，同时请教一个问题
New
收起展开js,展开收起

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

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

©DZ插件网所发布的一切资源仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站内容为站长个人技术研究记录或网络，不提供用户交互功能，所有内容版权归原作者所有。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，得到更好的正版服务。
您在本站任何的赞助购买、下载、查阅、回复等行为等均表示接受并同意签订《DZ插件网免责声明协议》。
如有侵权请邮件与我们联系处理: discuzaddons@vip.qq.com 并出示相关证明以便删除。敬请谅解！

Crystαl · 发表于 2025-8-7 07:42:43

.tg_no:before
.tg_yes:before

换这个就可以了

IT618发布 · 发表于 2025-8-7 07:43:10

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

/*板块收起与展开*/.toggle-container { display: inline-block; vertical-align: middle; margin-right: 5px;}.toggle-checkbox { position: absolute; opacity: 0;}.toggle-label { cursor: pointer; display: inline-block; -webkit-tap-highlight-color: transparent;}.toggle-switch { position: relative; width: 33px; height: 18px; background-color: #e0e0e0; border-radius: 11px; box-shadow: inset 0 1px 3px rgba(0,0,0,0.1); transition: all 0.3s ease;}.toggle-switch-handle { position: absolute; width: 16px; height: 16px; background-color: white; border-radius: 50%; top: 1px; left: 1px; box-shadow: 0 1px 3px rgba(0,0,0,0.2); transition: all 0.3s ease;}.toggle-checkbox:checked + .toggle-label .toggle-switch { background-color: #4285f4;}.toggle-checkbox:checked + .toggle-label .toggle-switch-handle { transform: translateX(15px);}

复制代码

DIV代码

<div class="toggle-container"> <input type="checkbox" id="category_$cat[fid]_toggle" class="toggle-checkbox" checked> <label for="category_$cat[fid]_toggle" onclick="toggle_collapse('category_$cat[fid]');" class="toggle-label"> <div class="toggle-switch"> <span class="toggle-switch-handle"></span> </div> </label></div></span>

复制代码