Question

我已经检查过有关同样效果的其他问题，但我找到的并没有帮助。
javascript代码完美运行，但不是第一次点击。（点击时第一次没有任何反应，但下次一切都很好。）它被放置在HTML <head>的末尾

<script>
    $(function () {
        $("#askLink").click(function () {
            if (document.getElementById('askArticle').style.display === "none") {
                document.getElementById('askArticle').style.display = "block";
                document.getElementById('CONTENT').style.display = "none";
            }
            else {
                document.getElementById('askArticle').style.display = "none";
                document.getElementById('CONTENT').style.display = "block";
            }
        });
    });
</script>

askLink设置为

<li>
    <a href="javascript:;" id="askLink">Ask</a>
</li>

另一个超链接的设置方式几乎相同，功能不同，并且不受此类问题的影响。
我错过了什么？

Answer 1

从href中删除javascript：

<a href="javascript:;" id="askLink">Ask</a>

应该是这样的：

<a href="#" id="askLink">Ask</a>

或者，您可以使用＆＃39;＆＃39;：

<a href="javascript:'';" id="askLink">Ask</a>

另外，尝试使用preventDefault（）：

$("#askLink").click(function (e) {
e.preventdefault();

Answer 2

因为您使用的是jQuery，所以您可以这样做：

$(function () {
    $("#askLink").click(function () {
        var askArticle = $('#askArticle');

        //check if #askArticle is visible
        var isShown = askArticle.is(":visible");            
        askArticle.toggle(!isShown); //set to show or hide as per isShown
        $('#CONTENT').toggle(isShown);         
    });
});

和顺便说一句，您的链接<a href="javascript:;" id="askLink">Ask</a>无需任何更改即可使用

Answer 3

替换'javascript：;'从锚到'＃'

<a href="#" id="askLink">Ask</a>

要防止页面刷新或最后使用preventDefault()，请执行以下操作：

$("#askLink").click(function(e) {
  e.preventDefault();
  if(document.getElementById('askArticle').style.display === "none"){ 
    document.getElementById('askArticle').style.display = "block";
    document.getElementById('CONTENT').style.display = "none";
    }
  else{ 
    document.getElementById('askArticle').style.display = "none";
    document.getElementById('CONTENT').style.display = "block"; //Its block not "CD"
  }
});

Answer 4

您应该使用on not click：

<script>
$(function () {
    $("#askLink").on("click" , function (e) {
      e.preventDefault();
        if (document.getElementById('askArticle').style.display === "none") {
            document.getElementById('askArticle').style.display = "block";
            document.getElementById('CONTENT').style.display = "none";
        }
        else {
            document.getElementById('askArticle').style.display = "none";
            document.getElementById('CONTENT').style.display = "block";
        }
    });
});
</script>

<a href="#"></a>

Javascript if else功能仅在首次点击后才起作用

4 个答案: