Django 卷起（可折叠）菜单

发布于 2024-12-03 06:34:01 字数 409 浏览 1 评论 0原文

我有一个包含三个框架（横幅、菜单、内容）的网络应用程序菜单框架需要有一个动态的卷起菜单示例：

+ Teachers
  - Create
  - Edit
  - Delete

+ Schools
  - Create
  - Edit
  - Delete
  - View Staff

+ Classrooms
  - Create
  - Edit
  - Delete

如果您单击 + 或“学校”，它将隐藏/取消隐藏其下的项目。用户登录后需要根据用户组和角色动态绘制菜单。某些用户可能仅被授权查看

+ Classrooms
  -Edit

，而某些用户将看到所有内容。

是否有任何人使用过的任何构建或插件可以为我需要的提供框架？

原文

I have a web app with three frames (banner, menu, content)
The menu frame needs to have a dynamic roll-up menu
Example:

+ Teachers
  - Create
  - Edit
  - Delete

+ Schools
  - Create
  - Edit
  - Delete
  - View Staff

+ Classrooms
  - Create
  - Edit
  - Delete

If you click on the + or "Schools" it will hide/un-hide items under it.
The menu needs to be dynamically drawn after user login based on user group and role.
Some users may only be authorized to see

+ Classrooms
  -Edit

and some users will see everything.

Is there anything built or a plugin that anyone has used that would provide a framework for what I need?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

胡大本事 2024-12-10 06:34:01

使用 jQuery 的简单实现：

<div id="menu">
    <a>Teachers</a><br />
    <div style="display: none">
        <a href="">Edit</a><br />
        <a href="">Delete</a><br /> 
    </div>
    <a>Schools</a><br />
    <div style="display: none">
        <a href="">Edit</a><br />
        <a href="">Delete</a><br /> 
    </div>
</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$('#menu > a').click(function(){
    $(this).next().next().slideToggle();
    return false;
});
</script>

Simple implementation using jQuery:

<div id="menu">
    <a>Teachers</a><br />
    <div style="display: none">
        <a href="">Edit</a><br />
        <a href="">Delete</a><br /> 
    </div>
    <a>Schools</a><br />
    <div style="display: none">
        <a href="">Edit</a><br />
        <a href="">Delete</a><br /> 
    </div>
</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$('#menu > a').click(function(){
    $(this).next().next().slideToggle();
    return false;
});
</script>

回复收藏 0 原文