將向上和向下箭頭切換為圖像

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];
     });