请帮我写dtl代码和手风琴效果结合的html代码,标题后面我想加一个提交的按钮,标题字体用楷体三号字和内容块字体用宋文字体五号字
时间: 2024-02-24 18:58:10 浏览: 34
好的,下面是一个示例的HTML和DTL代码,结合了手风琴效果,并在每个标题后面添加了一个提交按钮,标题字体使用楷体三号字,内容块字体使用宋体五号字:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Accordion with DTL</title>
<style>
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
margin-bottom: 5px;
font-family: KaiTi, "Microsoft YaHei", serif;
}
.accordion p {
font-family: SimSun, "Microsoft YaHei", serif;
font-size: 14px;
}
.active, .accordion:hover {
background-color: #ccc;
}
.panel {
padding: 0 18px;
background-color: white;
display: none;
overflow: hidden;
}
.submit {
margin-left: 10px;
padding: 5px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
{% for item in items %}
<button class="accordion">{{ item.title }}<button class="submit">提交</button></button>
<div class="panel">
<p>{{ item.content }}</p>
</div>
{% endfor %}
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
</script>
</body>
</html>
```
在这个示例中,我们在每个标题后面添加了一个提交按钮,并且使用CSS样式设置了标题和内容块的字体。提交按钮的样式也可以根据需要进行修改。
你可以根据自己的需求修改HTML和DTL代码,以实现你想要的效果。