时间戳

首页 > 解决方案 > 如何在 django 中运行 html 和 jquery 代码？

python - 如何在 django 中运行 html 和 jquery 代码？

问题描述

我在 html 中运行 jquery 文件并且它可以工作，但是每当我在 {%block content%} {%endblock%} 内的 django 框架内运行代码时，滑动功能都不起作用。为什么以及如何解决这个问题？

{% extends 'testapp/base.html' %}
{%block content%}
<!DOCTYPE html>
<html>
   <head>
    <script 
   src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> 
   </script>
<script> 
    $(document).ready(function(){
      $("#flip").click(function(){
        $("#panel").slideToggle("slow");
     });
   });
 </script>
<style>
    #panel {
      display: none;
    }
</style>
    </head>
  <body> 
    <div id="flip">Click to slide the panel down or up</div>
    <div id="panel">Hello world!</div>
  </body>
</html>
{%endblock%}

标签： pythonjqueryhtmldjango

解决方案

将html, head,body标签移动到base.html:

base.html

<!DOCTYPE html>
<html lang="en">
<html>
   <head>
    <script 
       src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> 
   </script>
   <style>
    #panel {
      display: none;
    }
</style>
</head>
<body> 
    {% block content %}

    {% endblock %}
</body>
</html>

索引.html：

{% extends 'testapp/base.html' %}
{% block content %}
    <div id="flip">Click to slide the panel down or up</div>
    <div id="panel">Hello world!</div>
<script> 
    $(document).ready(function(){
      $("#flip").click(function(){
          $("#panel").slideToggle("slow");
      });
    });
</script>
{% endblock %}

推荐阅读