我正在尝试使用js函数打印出两列手风琴，并尝试使用新技术（对我而言）。我不知道如何解决的问题是，我的列在左侧奇怪地折断，从而导致错误：如果您单击左侧的最后一个，然后单击右侧的第一个，则该列将无法激活。
我的代码：
def get_serializer_class(self):
if self.request.method == 'GET':
return PostListSerializer
return PostDetailSerializer
def get_permissions(self):
if self.request.method == 'GET':
return [IsAuthenticated()]
return []
您会注意到，我已经准备好使用 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
.accordian{
color: red;
text-align: center;
max-width: 50%;
margin: 0 auto;
padding: 1rem;
columns: 2;
}
.accordian dt{
border: blue solid .1rem;
border-radius: 10px;
display: block;
background-color: blueviolet;
min-height: 3rem;
margin: 0 auto 10px auto;
break-inside: avoid;
width: 100%;
break-after: avoid-page;
}
.accordian dd{
display: block;
border: red solid .2rem;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
height: 6rem;
width: 95%;
margin: -11px auto 10px auto;
break-inside: avoid;
break-after: avoid-page;
}
span{
width: 100%;
}
</style>
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
</head>
<body>
<script type="text/javascript">
var address = "220 louise st. Bonne Terre Mo";
var states = ["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Carolina","North Dakota","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]
document.write('<dl class="accordian">');
for (var i = 0; i < states.length; i++){
document.write(
"<dt><span>"+states[i]+"</span></dt><dd>"+address+"</dd>")
}
document.write("</dl>");
($(document).ready(function($){
var panels = $('.accordian > dd').hide();
panels.first().show();
$('.accordian > dt > span').click(function(){
var Thethis = $(this);
panels.slideUp();
Thethis.parent().next().slideDown();
$('.accordian > dt').css({backgroundColor: "blueviolet"});
Thethis.parent().css({backgroundColor: "green"});
return false;
}
)}
))
</script>
</body>
</html>
了。如果有人可以帮助我，我将非常感激。