腳本無法在HTML body標籤外工作

我有一個基本模板，可以正常使用我在這裏發佈的格式。但是，我想將腳本保留在一個塊內，但是當我將一個腳本從主體移動到頭部時，單擊時菜單不會丟失。我怎樣才能解決這個問題？腳本無法在HTML body標籤外工作

HTML：

{% load staticfiles %} 

<!DOCTYPE html> 

<html lang="en" class="no-js"> 
    <head> 
     {% block meta_tags %}{% endblock meta_tags%} 


    <title> 
     {% block title %}BPM App{% endblock title %} 
    </title> 

    {% block stylesheets %} 
     <link type="text/javascript" href="{% static 'bpmapp/js/topnavbar.js' %}"> 
     <link rel="shortcut icon" type="image/png" href="{{STATIC_URL}}/favicon.ico"/> 
    {% endblock %} 

    {% block javascript %} 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 

     <script> 
      $(function() { 
       cbpHorizontalMenu.init(); 
      }); 
     </script> 
    {% endblock javascript %} 

    {% block extra_head %}{% endblock %} 
    </head> 

    <body> 
     {% include 'bpmapp/_topnavbar.html' %} 

     {% block content %} 
     {% endblock content %} 

     <script src="static/bpmapp/js/cbpHorizontalMenu.min.js"></script> 

    </body> 
</html>

cbpHorizontalMenu.min.js：

var cbpHorizontalMenu = (function() { 
    var b = $("#cbp-hrmenu > ul > li"), 
     g = b.children("a"), 
     c = $("body"), 
     d = -1; 

    function f() { 
     g.on("click", a); 
     b.on("click", function(h) { 
      h.stopPropagation() 
     }) 
    } 

    function a(j) { 
     if (d !== -1) { 
      b.eq(d).removeClass("cbp-hropen") 
     } 
     var i = $(j.currentTarget).parent("li"), 
      h = i.index(); 
     if (d === h) { 
      i.removeClass("cbp-hropen"); 
      d = -1 
     } else { 
      i.addClass("cbp-hropen"); 
      d = h; 
      c.off("click").on("click", e) 
     } 
     return false 
    } 

    function e(h) { 
     b.eq(d).removeClass("cbp-hropen"); 
     d = -1 
    } 
    return { 
     init: f 
    } 
})();

編輯以：

var cbpHorizontalMenu =$(document).ready(function() { 
    var b = $("#cbp-hrmenu > ul > li"), 
     g = b.children("a"), 
     c = $("body"), 
     d = -1; 

    $(function f() { 
     g.on("click", a); 
     b.on("click", function(h) { 
      h.stopPropagation() 
     }) 
    }); 

    $(function a(j) { 
     if (d !== -1) { 
      b.eq(d).removeClass("cbp-hropen") 
     } 
     var i = $(j.currentTarget).parent("li"), 
      h = i.index(); 
     if (d === h) { 
      i.removeClass("cbp-hropen"); 
      d = -1 
     } else { 
      i.addClass("cbp-hropen"); 
      d = h; 
      c.off("click").on("click", e) 
     } 
     return false 
    }); 

    $(function e(h) { 
     b.eq(d).removeClass("cbp-hropen"); 
     d = -1 
    } 
    return { 
     init: f 
    }); 
})();

來源

2017-01-09 Ibo

的Y元素你試圖在DOM上增加可能沒有完成加載，因此在JavaScript運行時不存在。通過將它保留在body的底部，當javascript運行時，這些元素就存在了。您可以使用類似

$(document).ready(function() { 
    var cbpHorizontalMenu = {}; 
});

這裏

更多信息https://api.jquery.com/ready/

來源

2017-01-09 21:09:58 axrami

我編輯的js文件，但仍然無法點擊菜單。我做的編輯是否正確？你可以在這個問題中看到編輯好的js文件 – Ibo

編輯我的答案 – axrami

請問你能編輯原始的js文件，我必須看看你如何改變它？我不知道你想如何實現與原始文件 – Ibo

如果你要在頁面中包含（所以身體標記之前）的頭你的腳本就沒有逃脫需要包括jQuery作爲您項目的一部分（用於跨瀏覽器可靠性目的）。我建議你下載到能夠從本地磁盤加載它，否則，這裏是網上鍊接它，你可以（只是你自己的腳本標籤之前）添加到您的頭上：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

現在，您需要使用jQuery的，以確保您的DOM完全加載執行你的腳本之前，你通過包裝你準備函數內部整個腳本代碼做到這一點：

$(document).ready(function() { 
    var cbpHorizontalMenu = (function() { 
     var b = $("#cbp-hrmenu > ul > li"), 
      g = b.children("a"), 
      c = $("body"), 
      d = -1; 

     function f() { 
      g.on("click", a); 
      b.on("click", function(h) { 
       h.stopPropagation() 
      }) 
     } 

     function a(j) { 
      if (d !== -1) { 
       b.eq(d).removeClass("cbp-hropen") 
      } 
      var i = $(j.currentTarget).parent("li"), 
       h = i.index(); 
      if (d === h) { 
       i.removeClass("cbp-hropen"); 
       d = -1 
      } else { 
       i.addClass("cbp-hropen"); 
       d = h; 
       c.off("click").on("click", e) 
      } 
      return false 
     } 

     function e(h) { 
      b.eq(d).removeClass("cbp-hropen"); 
      d = -1 
     } 
     return { 
      init: f 
     } 
    })(); 
});

來源

2017-01-09 21:44:42

我取代了js文件，但它不起作用 – Ibo

甚至在我將腳本行移動到頭之前它不起作用，所以js代碼執行有問題 – Ibo

腳本無法在HTML body標籤外工作

回答

相關問題