我正在使用.slideToggle在单击图像时显示/隐藏内容,当内容显示时它会更改一次,但当再次单击以隐藏内容时不会更改回原始图像,不太清楚是什么我在这里失踪了。任何帮助非常感谢。
jQuery:
$(document).ready(function() {
$('#toggle1').click(function() {
$('.toggle1').slideToggle('1100');
$("#bg").attr('src',"images/box-arrow-down.jpg");
return false;
});
HTML:
<div class="box">
<div style="width:1100px;height:100px;margin-left:40px;">
<span style="float:left;"><a href="#" id="toggle1"><img src="images/box-arrow-up.jpg" height="16" width="17" alt="arrow" id="bg" style="margin-top:40px;" /></a></span>
</div>
<div class="toggle1" style="display:none;width:1100px;padding:0px;margin-left:8px;">
<div class="boxTime">09:00</div>
</div>
</div>
答案 0 :(得分:1)
您没有引用原始src
。你可以用数百种不同的方式来解决这个问题......但这里有几个例子。
您可以这样做:
$(document).ready(function() {
$('#toggle1').click(function() {
$('.toggle1').slideToggle('1100');
var src = $("#bg").attr('src') == "images/box-arrow-down.jpg" ? "images/box-arrow-up.jpg" : "images/box-arrow-down.jpg";
$("#bg").attr('src', src);
return false;
});
});
样本: http://jsfiddle.net/dirtyd77/NCqRk/
或类似的东西:
$(document).ready(function() {
var originalImage = $("#bg").attr('src');
$('#toggle1').click(function() {
$('.toggle1').slideToggle('1100');
var src = $("#bg").attr('src') == originalImage ? "images/box-arrow-down.jpg" : originalImage;
$("#bg").attr('src', src);
return false;
});
});