0

我将 Django 1.5 与 Python 2.7 一起使用。我有一个ul带有切换功能的菜单，如下图所示：http ://s1.directupload.net/file/d/3278/d9b2xobc_jpg.htm 。

所以现在我的问题：

如果我从展开的菜单中单击一个链接，Django 会呈现整个站点并且菜单会再次折叠。尽管站点始终是新呈现的，但菜单是否可以保持扩展？

这是html： 

{% load staticfiles %}
<!DOCTYPE html>

<head>
    <meta content="text/html; charset=utf8">
    <title>DonkeyBase</title>
    <link rel="stylesheet" type="text/css" href="{%  static 'style.css' %}" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script src="{%  static 'script.js' %}" type="text/javascript"></script>
</head>

<body>
    <div id="logout">
        {% if user.is_active %}angemeldet als: {{ user.username }} &nbsp;&nbsp;<a href="/benutzerverwaltung/logout">Logout</a>
        {% else %} <a href="/">Login</a>{% endif %}
    </div>
    <div id="banner">
        <div id="logo">
            <img src="{%  static 'images/DonkeyBaseEsel2_ora.png' %}" alt="logo" width="123" height="123">
        </div>
        <div id="text">
        <h1>DonkeyBase</h1>
        <h3><span id="h3">Saved by DonkeyBase!</span></h3>
        </div>
    </div>
    <div id="navigation">
    <ul id="menu1" class="example_menu">
        <li><a class="collapsed" id="studie">Studien</a>
            <ul>
                <li><a href="/studienverwaltung">Studienverwaltung</a></li>
                <li><a href="/studienverwaltung/createStudieForm">Studie anlegen</a></li>
                <li><a href="/studienverwaltung/showStudie">Studien anzeigen</a></li>
            </ul>
        </li>
        <li><a class="collapsed" id="operation">Operationen</a>
            <ul>
                <li><a href="/opverwaltung">Operationsverwaltung</a></li>
                <li><a href="/opverwaltung/erstellenOp">Operation anlegen</a></li>
                <li><a href="/opverwaltung/anzeigeOp">Operationen anzeigen</a>
            </ul>
        </li>
        <li><a class="collapsed" id="laborwert">Laborwerte</a>
            <ul>
                <li><a href="/laborwertverwaltung">Laborwertverwaltung</a></li>
                <li><a href="/laborwertverwaltung/erstellenLaborwert">Laborwert anlegen</a></li>
                <li><a href="/laborwertverwaltung/anzeigeLaborwert">Laborwerte anzeigen</a></li>
            </ul>
        </li>
        <li><a class="collapsed" id="patient">Patient</a>
            <ul>
                <li><a href="/patientenverwaltung">Patientenverwaltung</a></li>
                <li><a href="/patientenverwaltung/erstellenPatient">Patient anlegen</a></li>
                <li><a href="/patientenverwaltung/anzeigePatient">Patienten anzeigen</a></li>
            </ul>
        </li>
        <li><a class="collapsed" id="benutzer">Benutzer</a>
            <ul>
                <li><a href="/benutzerverwaltung">Benutzerverwaltung</a></li>
                <li><a href="/benutzerverwaltung/createUser">Benutzer anlegen</a></li>
                <li><a href="/benutzerverwaltung/createGruppe">Gruppe erstellen</a></li>
                <li><a href="/benutzerverwaltung/showGruppe">Gruppe anzeigen</a></li>
            </ul>
        </li>
        <li><a class="collapsed" id="probe">Proben</a>
            <ul>
                <li><a href="/probenverwaltung">Probenverwaltung</a></li>
                <li><a href="#">Probe anlegen</a></li>
                <li><a href="/probenverwaltung/showProbe">Probe anzeigen</a></li>
            </ul>
        </li>
        <li><a class="collapsed" id="histo">Histologiebefunde</a>
            <ul>
                <li><a href="#">Histo anlegen</a></li>
                <li><a href="#">Histo anzeigen</a></li>
            </ul>
        </li>

    </ul>
    </div>
    <div id="content">
    <div id="test" style="float: right; absolute: fixed;"></div>
        <h2>{% block title %}{% endblock %}</h2>
        &nbsp;
        {% block content %}{% endblock %}

    </div>

</body>
</html>

javascript/jQuery:

$(document).ready(function() {
    $("#menu1 > li > a").click(function() {
    $(this).toggleClass("expanded").toggleClass("collapsed").parent().find('> ul').slideToggle("fast");
        });
});
4

0 回答 0