javascript - 将向上和向下箭头切换为图像

Question

我有两个箭头图像，向上和向下。我的问题是当我使用 slideToggle() 时，它上下切换，但图像保持不变而不是改变。例如，如果我向上切换，图像应​​该自动变为向下箭头，反之亦然。此外，一旦发生切换，这些箭头应移至页面顶部。当前代码显示两个箭头，我希望它是一个根据切换而变化的箭头。

到目前为止我有什么..

HTML:

 <div id="toggleParam">
        <input type="image" class="upArrow" src="~/Content/Images/Reserved.ReportViewerWebControl.png" name="Show / Hide Parameters" />
        <input type="image" class="downArrow" src="~/Content/Images/downArrow.png" name="Show / Hide Parameters" />
 </div>

CSS:

.upArrow{
            display: block;
            margin-left: 690px;
            margin-top: 0px;
            border-width: 5px;
            padding-bottom: 0px;
            cursor: pointer;
            height: 7pt;
      }
 .downArrow{
            display: block;
            margin-left: 760px;
            margin-right: 70px;
            margin-top: -10px;
            border-width: 5px;
            padding-bottom: 0px;
            cursor: pointer;
            height: 7.5pt;
      }

JavaScript/JQuery:

$(document).ready(function () {
            $('#toggleParam').on("click", function () {
                $('.dropdown').slideToggle();
            }); 

我需要的就是这两张图..

我意识到在 JS 部分遗漏了很多代码。我在问这个问题时正在研究它。谢谢您的帮助!

Answer 1

您只需要相应地在切换函数中包含箭头的元素:

$('#toggleParam').on("click", function () {
    $('.downArrow, .upArrow').toggle();
    $('.dropdown').slideToggle();
});

同样在一开始你需要隐藏其中一个箭头(不确定你的情况是哪一个):

.downArrow{
        display: none;
...

.upArrow{
        display: block;