我想让Jquery缓和两个箭头(向上箭头和向下)
(它在盒子的头部有一个包含向上箭头和向下箭头的圆圈)。第一个箭头显示为向下变成框变为向下,当向下框时,箭头变为向上。代码:
但它的上下框不会出现箭头。我有堆栈来做它。请帮忙解决这个问题。
感谢您的帮助。
答案 0 :(得分:1)
尝试这个我在这里给演示,我只是改变img标签的img src,标识为img1
我为你提供了一个演示...尝试实现这个..
脚本
<script type="text/javascript">
$(document).ready(function () {
$('#img1').click(function () {
if ($("#img1").attr("src")=="up.jpg") {
$("#img1").attr("src","down.jpg");
$(".panel-box").slideUp('slow');
}else if($("#img1").attr("src")=="down.jpg"){
$("#img1").attr("src","up.jpg");
$(".panel-box").slideDown('slow');
}
});
});
</script>
HTML代码
<img id="img1" src="up.jpg" alt="Click here" width="100px" height="100px"/>
<fieldset>
<div class="panel-box" >
<form>
<div class="column1">
<label>Arrival Date</label>
<input type="text" id="arrival" placeholder="DD/MM/YYYY">
</div>
<div class="column2">
<label>Departure Date</label>
<input type="text" id="departure" placeholder="DD/MM/YYYY">
</div>
<div class="column3">
<a href="#" class="button" style=" vertical-align:middle; margin-top:18px;">Book Now</a>
</div>
</form>
</div>
</fieldset>