<html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <style> .side-nav-item { display: block; padding: 10px 15px 10px 15px; background-color: #FFFFFF; cursor: pointer; box-shadow: 0 1px 1px rgba(0, 0, 0, .05); -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05); } .item-title { background-color: #F5F5F5; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom: 1px solid #DDDDDD; } .panel-heading { margin-top: 5px; padding: 0; border-radius: 3px; border: 1px solid transparent; border-color: #DDDDDD; } .item-body { padding: 10px 15px 5px 15px; border-bottom: 1px solid #DDDDDD; } .item-second { margin-top: 5px; cursor: pointer; } .item-second a { display: block; height: 100%; width: 100%; } </style> </head><div class="col-md-2 side-nav"> <div class="panel-group" id="accordion"> <div class="panel-heading panel"> <a href="" class="side-nav-item item-title"> 首页 </a> <div class="item-body collapse"> </div> </div> <div class="panel-heading panel"> <a data-toggle="collapse" data-parent="#accordion" href="#item-cangku" class="side-nav-item item-title"> 仓库管理 </a> <div id="item-cangku" class="panel-collapse collapse in"> <div class="item-body"> <ul class="list-unstyled"> <li class="item-second"><a href="">产品库存</a></li> <li class="item-second"><a href="">原料库存</a></li> </ul> </div> </div> </div> <div class="panel-heading panel"> <a data-toggle="collapse" data-parent="#accordion" href="#item-caiwu" class="side-nav-item item-title collapsed"> 列表1 </a> <div id="item-caiwu" class="panel-collapse collapse"> <div class="item-body"> 222 </div> </div> </div> <div class="panel-heading panel"> <a data-toggle="collapse" data-parent="#accordion" href="#item-caiwu" class="side-nav-item item-title collapsed"> 列表2 </a> <div id="item-caiwu" class="panel-collapse collapse"> <div class="item-body"> 222 </div> </div> </div> <div class="panel-heading panel"> <a data-toggle="collapse" data-parent="#accordion" href="#item-renshi" class="side-nav-item item-title collapsed"> 人事管理 </a> <div id="item-renshi" class="panel-collapse collapse"> <div class="item-body"> 333 </div> </div> </div> </div></div>这个是页面的html，列表1 列表2 是我用jinja2 语法循环的，循环id 出来一样
有什么好点的办法，可以让id变化，或者有其他办法可以下拉。
解决方案
首先，能否详细的提供一下你的jinja2语法。
其次，按照我猜测的意图进行如下回答。
你的原始代码如下：
<div class="panel-heading panel"> <a data-toggle="collapse" data-parent="#accordion" href="#item-caiwu" class="side-nav-item item-title collapsed"> 列表1 </a> <div id="item-caiwu" class="panel-collapse collapse"> <div class="item-body"> 222 </div> </div> </div>按照我的理解修改如下：
<div class="panel-heading panel">{% for item in navigation %} <a data-toggle="collapse" data-parent="#accordion" href="#item-caiwu_{{ loop.index }}" class="side-nav-item item-title collapsed"> 列表1 </a> <div id="item-caiwu_{{ loop.index }}" class="panel-collapse collapse"> <div class="item-body"> {{ item }} </div> </div>{% endfor %}</div>同时建议你看看这篇文章。