问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

jinja2循环 做一个左侧点击菜单，每次循环id相同 导致点击下拉按钮点击的结果都是一个？有什么好办法吗

头像
大大的虎
    3289
    <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变化，或者有其他办法可以下拉。

    pythonflaskjinja2
    阅读 3.6k
    1 个回答
    得票最新
    头像
    藕丝空间
      1.7k32438
      ✓ 已被采纳

      首先，能否详细的提供一下你的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>

      同时建议你看看这篇文章。

      http://www.os373.cn/article/4

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题