单击时旋转文本链接

Question

我是 javascripting 的初学者。我想知道如何编写一个在单击文本链接时在容器内上下移动的 div。

这是我不明白的文本旋转部分。我想我可以使用 jquery animate css top 调整来触发 div 的上下移动。

但我不知道如何编写 .click 函数 > 向下触发 div，箭头文本向上旋转 ^，否则触发 div 向上，箭头文本向下旋转 v（或返回原始状态，即向下箭头 v）。

我找到了一个类似的答案，我想达到jQuery: Toggle rotate div on click function 如果我知道如何使用 if() 语句，那就太好了。我不知道里面放什么！ T_T

例如this website 的顶部黑色面板，页面右侧有一个小箭头选项卡，可触发顶部面板隐藏/显示或向上/向下移动。

Answer 1

这样的？

工作示例在这里：http://jsfiddle.net/GaJBy/1/

请注意它使用的是第 3 方 jQueryRotate 插件 (http://www.nealfletcher.co.uk/js/jQueryRotate.js)。

CSS：

#outerDiv {
    position: relative; 
    height: 300px; 
    width: 300px; 
    background: #FFF; 
    border: 1px solid #A0A0A0
}

#innerDiv {
    position: absolute; 
    border: 1px solid #CCC; 
    width: 50px; 
    height: 50px; 
    vertical-align: middle; 
    text-align: center;
    font-size: 36px
}

HTML：

<div id="outerDiv">
    <div id="innerDiv">↓</div>
</div>

JS：

$("#innerDiv").click(function () { // Attach click listener
    var duration = 500;
    // If the square is not at the top, go down otherwise go back up       
    if (parseInt($(this).css("top")) > 0) {
        finalPosition = 0;
        startingAngle = 180;
        endingAngle = 0;
    } else {
        finalPosition = $("#outerDiv").height() - $(this).height();
        startingAngle = 0;
        endingAngle = 180;
    }

    $(this).rotate({
        angle: startingAngle,
        animateTo: endingAngle,
        duration: duration
    });

    $(this).animate({
        top: finalPosition
    }, duration);
});