jquery更多和收起图标怎么不能动了

Posted 2023-05-06

造成这个的原因有js文件路径(引用)存在问题,再有就是js文件写的有问题 参考技术A 你是想最多只有一个展开的组对吧？ 这样的话，当你触发你的点击事件展开对应分组的时候，先找到其它展开的分组，将其折叠，同时将其组名前边的减号变成加号，然后再展开你点击的分组。 参考技术B 写的出问题了

可展开收起效果的网站提示框

分别用JavaScript和jQuery写了滑动效果的网站提示。

用jQuery很简单，用 animate() 方法就可以了。

用JavaScript稍微复杂一点，需要用到定时器实现动画效果，并且要考虑到鼠标多次移入“提示”时会开启多个定时器，则要清除定时器的情况。

效果如图：

收起时： 展开时：

HTML：

<div id="cue-hide"><span id="cue-show">小贴士 </span><p>用JavaScript和jQuery分别写滑动效果的网站提示。</p></div>

JavaScript：

/*JavaScript*/
window.onload=function(){
    var cdiv=document.getElementById("cue-hide");
    cdiv.onmouseover=function(){
        cueshow();
    };
    cdiv.onmouseout=function(){
        cuehide();
    };
}
var timer=null;
function cueshow(){
    clearInterval(timer);
    var cdiv=document.getElementById("cue-hide");
    timer=setInterval(function(){
        if(cdiv.offsetLeft==0){
            clearInterval(timer);
        }else{
            cdiv.style.left = cdiv.offsetLeft+25+‘px‘; 
        }
    },50);
};
function cuehide(){
    clearInterval(timer);
    var cdiv=document.getElementById("cue-hide");
    timer=setInterval(function(){
        if(cdiv.offsetLeft==-200){
            clearInterval(timer);
        }else{
            cdiv.style.left = cdiv.offsetLeft-25+‘px‘; 
        }
    },50);
};

jQuery：

$(document).ready(function(){
    $("#cue-hide").mouseenter(function(){
        $("#cue-hide").animate({left:"0px"},"slow"); 
    });
    $("#cue-hide").mouseleave(function(){
        $("#cue-hide").animate({left:"-200px"},"slow"); 
    });
});