如何使Jquery缓和有一个向上和向下箭头?

时间:2013-05-30 09:20:45

标签: jquery

我想让Jquery缓和两个箭头(向上箭头和向下)

(它在盒子的头部有一个包含向上箭头和向下箭头的圆圈)。第一个箭头显示为向下变成框变为向下,当向下框时,箭头变为向上。代码:

但它的上下框不会出现箭头。我有堆栈来做它。请帮忙解决这个问题。

感谢您的帮助。

1 个答案:

答案 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>