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

也许你可以帮助我......

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>

Javascript在第二次点击后执行

4 个答案: