jquery - 如何让 Jquery 缓动有一个向上和向下箭头？

Question

我想让 Jquery 缓动必须有两个箭头（向上箭头和向下箭头）

（它在盒子的头部看起来有包含向上箭头和向下箭头的圆圈）。首先，箭头出现向下变为框变为向下，当框向下时，箭头变为向上。代码：

但它只是用于上下框不会出现箭头。我有筹码来做。请帮助解决这个问题。

谢谢您的帮助。

Answer 1

试试这个，我在这里给出演示，我只是用 id 更改 img 标签的 img srcimg1

我为您提供了一个演示......尝试实现这一点..

脚本在这里

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