第二次单击后立即执行Javascript

Question

对于这个问题，我没有找到直接或普遍的答案，但我相信一劳永逸地解决它可能会引起普遍的兴趣。 我必须承认我对js还是很陌生。

我的问题是，我需要在“链接”上单击两次以执行javascript。

头：

<script type="text/javascript">
function toggle(navi){
var elem = document.getElementById(navi);

if(elem.style.top == "-604px"){
    elem.style.top = "0px"; // elem.style.textDecoration = "underline"; 
}else{
    elem.style.top = "-604px";//elem.style.textDecoration = "none";
}}
</script>

身体

<a href="javascript:toggle('navi')">Link</a>

为了更好理解的小提琴 ： 小提琴

也许你可以帮帮我。

Answer 1

您可能要使用jQuery进行此操作，则只需单击一次即可：

<a id='clicketyclick'>Link</a>

<script>
    $("#clicketyclick").click(function() {
        toggle(navi);
    });
</script>

如果您是新的JS，你应该学习jQuery，因为它是最好的JavaScript框架之一左右，而且它会使你的生活很轻松了许多。

但是，如果您不想使用jQuery，则基本上可以使用：

<a onclick="toggle(navi)">Link</a>

Answer 2

首先，您没有将字符串传递给'toggle'函数，以便它通过id来选择元素。

然后，使用JQuery获得CSS“ top”属性似乎可以解决“ elem.style.top”在初始化时为空的问题（需要双击）。

这是工作的小提琴： http : //jsfiddle.net/gkhBM/

$("#clicketyclick").click(function() { toggle("navi"); });

function toggle(navi) {
    var elem = document.getElementById(navi);
    //console.log(elem.style.top);
    //console.log($(elem).css('top'));
    if($(elem).css('top') == "-604px"){
        $(elem).css('top',"0px"); // elem.style.textDecoration = "underline"; 
    }else{
        $(elem).css('top',"-604px");//elem.style.textDecoration = "none";
    }
}

当调试问题时，console.log非常有用。

Answer 3

您可以按照Max Langarek所说的做，也可以只单击按钮而不是标签。

也许像

<button  onclick="toggle(navi)">Button</button>

无论哪种方式，我之前都没有看过javascript:toggle(navi)调用函数的方式..也许我需要更多经验。

Answer 4

尝试计算您的点击次数

var clickNumber = 1;

function functionTwice() {

    if(clickNumber == 1) {
        clickNumber = clickNumber +1;
    }
    else if(clickNumber == 2) {
        clickNumber = 1;
            var elem = document.getElementById(navi);

    if(elem.style.top == "-604px"){
        elem.style.top = "0px"; // elem.style.textDecoration = "underline"; 
    }else{
        elem.style.top = "-604px";//elem.style.textDecoration = "none";
    }
    }


}

HTML：

<a id='clicketyclick' onClick="functionTwice()">Link</a>
<div id="navi"></div>