我有一个问题,结合两个正确独立工作的函数,希望获得一些见解。 我知道这有id / class声明的todo,我只是不确定如何有效地完成显示/隐藏div并将图像function合并到我的切换如下:(在doc ready中)
$('.acc_container #info').hide(); $('.acc_container #showInfo').click(function(){ $(this).toggleClass("active").next().slideToggle("slow"); return false; //Prevent the browser jump to the link anchor });
我的图片展开折叠function:(在doc ready中)
$('.acc_container #showInfo img').live('click', function () { if ( this.src.match('details_close') ) { this.src = "..images/details_open.png"; } else { this.src = "../images/details_close.png"; } });
html如下
Expand Specific info
revealed
非常感谢任何帮助!
编辑
我希望在图像中完成的最终结果
在单击#showInfo div之前
展开https://desmond.imageshack.us/Himg834/scaled.php?server=834&filename=expand.gif&res=medium
单击#showInfo div后
崩溃https://desmond.imageshack.us/Himg12/scaled.php?server=12&filename=collapsezh.gif&res=medium
因此#info div显示并隐藏onclick,并且图像打开/关闭以使客户端展开折叠外观
这似乎是唯一有效的方法,我先将图像转换为div的切换
$('.acc_container #info').hide(); $('.acc_container #showInfo img').live('click', function () { if ( this.src.match('details_close') ) { this.src = "../images/details_open.png"; $('.acc_container #showInfo').toggleClass("active").next().slideToggle("slow"); } else { this.src = "../images/details_close.png"; $('.acc_container #showInfo').toggleClass("active", false).next().slideToggle("slow"); } return false; //Prevent the browser jump to the link anchor });
我确信这是一种更优雅的方式,但这种方法确实有效
如果我理解正确,这可能对你有用
$('.acc_container #info').hide(); $('.acc_container #showInfo').click(function(){ $(this).toggleClass("active").next().slideToggle("slow"); var detailsImage = $(this).find('img'); if ( detailsImage.src.match('details_close') ) { detailsImage.src = "..images/details_open.png"; } else { detailsImage.src = "../images/details_close.png"; } return false; //Prevent the browser jump to the link anchor });
你在找这样的东西吗?
$('.acc_container #info').hide(); $('.acc_container #showInfo').live('click', function() { $(this).toggleClass("active").next().slideToggle("slow"); var infoImg = $('.acc_container #showInfo img'); if (infoImg.src.match('details_close')) { infoImg.src = '../images/details_open.png'; } else { infoImg.src = '../images/details_close.png'; } return false; });
以上就是jQuery教程分享Jquery toggleClass和展开/折叠图像相关内容,想了解更多jQuery开发(异常处理)及jQuery教程关注计算机技术网(www.ctvol.com)!)。
本文来自网络收集,不代表计算机技术网立场,如涉及侵权请联系管理员删除。
ctvol管理联系方式QQ:251552304
本文章地址:https://www.ctvol.com/jquerytutorial/557754.html