第二次單擊后立即執行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>