Question

我对JavaScript有一个疑问：当用户单击下拉按钮时，文本框将打开，并且按钮的方向会改变并旋转。

我想我应该用两张照片。当我单击下拉按钮时，第一张照片将被隐藏，而另一张照片将被替换，但是我不知道如何在JavaScript中执行此操作（imageButton2的CSS代码不起作用）。这是我的代码：

$(function () {

    $("#jump_down").click(function () {
        $("#wrapper").slideToggle("slow");
    })

})

var show1=true;
    $('#jump_down').click(function(event) {
        document.getElementById('jump_down').style.visibility = show1 ? 'visible' : 'hidden';
        document.getElementById('ImageButton2').style.visibility = show1 ? 'hidden' : 'visible';
        show1 = !show1;
    })

#jump_down{
    position: relative;
    display: inline-block;
    width: 100%;
    background-color: rgba(150,190,250,0.7);
    padding: 20px 0;
}

#jump_down img{
    width: 3%;
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}

#wrapper{
    background-color: rgba(164,231,246,0.8);
    overflow: hidden;
}

#ImageButton2 img{
    width: 3%;
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}

<head>
 <meta charset="UTF-8">
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>

</head>
<body>

<a id="jump_down" href="#wrapper"><img src="https://d30y9cdsu7xlg0.cloudfront.net/png/427197-200.png" onClick="swapButtons(false)" style="visibility: visible; "></a>

<img src="http://dl.20script.ir/tools/back-up/UpBtn_20Script_2.png" id="ImageButton2" alt="Get Last Digits" style="visibility: hidden;" onClick="swapButtons(true)" />
<div id="wrapper">
           <p>
           Hellow
           </p>
        </div>
        </body>

Answer 1

您可以为图像旋转提供纯CSS解决方案。

一旦您的#jump_down div具有类.open

，就旋转图像

#jump_down.open img{
 transform:  translate(-50%,-50%) rotate(180deg);
}

要切换.open类，请在单击jQuery toggleClass('open')时应用#jump_down。

$(function () {

    $("#jump_down").click(function () {
        $( this ).toggleClass("open");
        $("#wrapper").slideToggle("slow");
    })

})

#jump_down{
    position: relative;
    display: inline-block;
    width: 100%;
    background-color: rgba(150,190,250,0.7);
    padding: 20px 0;
}

#jump_down img{
    width: 3%;
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}

#jump_down.open img{
 transform:  translate(-50%,-50%) rotate(180deg);
}

#wrapper{
    background-color: rgba(164,231,246,0.8);
    overflow: hidden;
}

<head>
 <meta charset="UTF-8">
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>

</head>
<body>

<a id="jump_down" href="#wrapper"><img src="https://d30y9cdsu7xlg0.cloudfront.net/png/427197-200.png" style="visibility: visible; "></a>

<div id="wrapper">
           <p>
           Hellow
           </p>
        </div>
        </body>

隐藏照片并用JavaScript替换另一张照片

1 个答案: