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;

Answer 2

尝试一下（注意-有n种方式可以做到这一点；这就是我的方式）。

    <!--index.html-->

    <div id="toggleParam" class="toggle-param--up">
      <input type="image" class="up-arrow" src="~/Content/Images/Reserved.ReportViewerWebControl.png" name="Show / Hide Parameters" />
      <input type="image" class="down-arrow" src="~/Content/Images/downArrow.png" name="Show / Hide Parameters" />
    </div>


    /* app.css */
    .toggle-param--up .down-arrow { display; none;}
    .toggle-param--down .up-arrow { display; none;}


    //app.js

     $('#toggleParam').on("click", function (e) {

       // the rest of your logic goes here....


       var isUp = $(e.target).hasClass("toggle-param--up"),
           directionClass = { true: "toggle-param--up", false: "toggle-param--down"};
       $(e).target.removeClass(directionClass[isUp]).addClass(directionClass[!isUp];
     });

上下箭头作为图像切换

2 个答案: