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>

更好理解的 fiddle :fiddle

也许你能帮帮我..

Answer 1

首先，您没有将字符串传递给“切换”函数，以便它通过元素的 ID 选择元素。

然后使用 JQuery 获取 CSS“top”属性似乎解决了“elem.style.top”在初始化时为空的问题(需要双击)。

这是工作 fiddle :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 在调试问题时非常有用。