如何在 django 中运行 html 和 jquery 代码？答案

【问题标题】：How to run the html and jquery code in django?如何在 django 中运行 html 和 jquery 代码？
【发布时间】：2019-06-29 02:40:15
【问题描述】：

我在 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%}

【问题讨论】：

有人回答我的问题吗？
请发布“base.html”代码
这是一个导航栏，编码这么多。
你扩展 'base.html' 并再次使用 '' 标签。
你的意思是我应该把index.html的所有代码都放到base.html中吗？

标签： python jquery html django

【解决方案1】：

将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>

Index.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 %}

【讨论】：

有人回答吗？我已经尝试过这段代码，但它不起作用。
jQuery 加载了吗？
每当我删除 {%block content%} {%endblock%} 时，它都会起作用，但无论何时我都没有。