Question

我是网络开发的初学者。我正在尝试在我的烧瓶应用程序中使用AdminLTE。我基本上将adminLTE的内容复制到文件夹static中，然后通过更改href来引用所有adminLTE样式表和javascripts，例如：从href="../../dist/css/AdminLTE.min.css"到href="static/dist/css/AdminLTE.min.css"

flask_app/
    app.py
    static/
        bower_components/
        css/
        dist/
        fonts/
        js/
        plugins/
    templates/
        mypage1.html
        mypage2.html

这适用于我的网页mypage1.html和mypage2.html，但我遇到的问题是侧边栏菜单和子菜单。假设mypage2.html是一个子菜单，当我展开并点击mypage1.html的链接时，它会重新加载整个页面，从而折叠子菜单。如何在mypage2.html加载时保持状态以使子菜单保持扩展状态。

以下是侧边栏的摘录：

<ul class="sidebar-menu">
<li class="header">HEADER</li>
<li class="active">
   <a href="{{ url_for('mypage1') }}">
   <i class="fa fa-dashboard"></i> <span>MyPage1</span>
   </a>
</li>
<li class="treeview">
   <a href="#">
   <i class="fa fa-folder"></i>
   <span>Submenu</span>
   <i class="fa fa-angle-left pull-right"></i>
   </a>
   <ul class="treeview-menu">
      <li>
         <a href="{{ url_for('mypage2') }}">
         <i class="fa fa-circle-o"></i>
         MyPage2
         </a>
      </li>
   </ul>
</li>
</ul>

Answer 1

您需要在ul treeview-menu中添加css类名： menu-open ，并且还需要将css类名 active 移至期望的li元素，如下所示：< / p>

<ul class="sidebar-menu">
<li class="header">HEADER</li>
<li>
   <a href="{{ url_for('mypage1') }}">
   <i class="fa fa-dashboard"></i> <span>MyPage1</span>
   </a>
</li>
<li class="treeview">
   <a href="#">
   <i class="fa fa-folder"></i>
   <span>Submenu</span>
   <i class="fa fa-angle-left pull-right"></i>
   </a>
   <ul class="treeview-menu menu-open">
      <li class="active">
         <a href="{{ url_for('mypage2') }}">
         <i class="fa fa-circle-o"></i>
         MyPage2
         </a>
      </li>
   </ul>
</li>
</ul>

AdminLTE扩展了Flask中的侧边栏子菜单折叠

1 个答案: