Question

Reigel的代码就像JSFiddle上的冠军一样。但是对我来说不会做任何事情。我能错过什么？我相信我有正确的标签和指向相关版本的JQuery库的链接。

  <!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JQuery Show/ Hide Cart- Working??!!- Mine</title>
<style type="text/css">
.hidden {
    display: none;
}
</style>
<script language="javascript">
 $(".toggle").click(function(){
  $(".hidden").slideToggle("slow");
    $(this).find('img').attr('src',function(i,src){
        return (src.indexOf('plusSign.gif') != -1)? 'minusSign.gif' : 'plusSign.gif';
    })
}); 


    $(".toggle").click(function(){
  $(".hidden").slideToggle("slow");
        $(this).html(function(i,html) {
            if (html.indexOf('Show') != -1 ){
               html = html.replace('Show','Hide');
            } else {
               html = html.replace('Hide','Show');
            }
            return html;
        }).find('img').attr('src',function(i,src){
        return (src.indexOf('plus.png') != -1)? 'http://t1.gstatic.com/images?    q=tbn:1PS9x2Ho4LHpaM:http://www.unesco.org/ulis/imag/minus.png' :'http://t3.gstatic.com/images?q=tbn:4TZreCjs_a1eDM:http://www.venice.coe.int/images/plus.png';
    });
});
</script>
</head>

<body>
<p class="toggle">Show Panel <img src="http://t3.gstatic.com/images?q=tbn:4TZreCjs_a1eDM:http://www.venice.coe.int/images/plus.png"></p>
<div class="hidden"> Blah Blah Blah </div>
</body>
</html>

Answer 1

您应该将所有jquery代码放在文档中，以便代码只在文档加载时执行

$(function(){
//all you code now
$(".toggle").click(function(){
  $(".hidden").slideToggle("slow");
    $(this).find('img').attr('src',function(i,src){
        return (src.indexOf('plusSign.gif') != -1)? 'minusSign.gif' : 'plusSign.gif';
    })
}); 


    $(".toggle").click(function(){
  $(".hidden").slideToggle("slow");
        $(this).html(function(i,html) {
            if (html.indexOf('Show') != -1 ){
               html = html.replace('Show','Hide');
            } else {
               html = html.replace('Hide','Show');
            }
            return html;
        }).find('img').attr('src',function(i,src){
        return (src.indexOf('plus.png') != -1)? 'http://t1.gstatic.com/images?    q=tbn:1PS9x2Ho4LHpaM:http://www.unesco.org/ulis/imag/minus.png' :'http://t3.gstatic.com/images?q=tbn:4TZreCjs_a1eDM:http://www.venice.coe.int/images/plus.png';
    });
});

});

详细了解here

JQuery切换隐藏/显示加号和减号图像和文本

1 个答案: