Я использую Symfony framework 3, поэтому я использую ветку для рендеринга моей страницы, и я использую «общий» макет с именем layout.html.twig:
<!DOCTYPE HTML>
<html>
<head>
{% block head %}
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>{% block title %} AcreatMailing {% endblock title %}</title>
{% block js_head %}
<script type="text/javascript" src="{{ asset('/bundles/front/components/MDBootstrap/js/jquery-3.1.1.min.js') }}"></script>
{% endblock js_head %}
{% block stylesheet %}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<link href="{{ asset('/bundles/front/css/style.min.css') }}" rel="stylesheet" />
{% endblock stylesheet %}
{% endblock head %}
</head>
<body>
<div id="body">
<div class="header">
<div class="row">
<div class="col-1 col-sm-1">
<button class="hamburger">☰</button>
</div>
<!--<div class="col-1 col-sm-1 col-lg-1 offset-lg-2" id="spanSearch">
<h4><span class="badge indigo hide">{# block badge_research %}{% endblock #}</span></h4>
</div>
<div class="col-2 offset-2 col-sm-2 offset-sm-3 col-md-2 offset-md-3 col-lg-2 offset-lg-3">
<div class="search d-inline pull-right">
<a href="#" onclick="showAndHide()" id='icon' ><i class="fa fa-search fa-2x" aria-hidden="true"></i></a>
<form class="form-inline waves-effect waves-light" id="form">
<input class="form-control tags" id="search" type="text" placeholder="Search" onkeydown="keyDown()">
</form>
</div>
</div>
!-->
<div class="col-7 col-sm-6 col-md-6 col-lg-6 offset-lg-5">
<ul class="list-inline pull-right downMenu inline">
<li class="nav-item dropdown btn-group">
<a class="nav-link" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="false"> {% if is_granted("IS_AUTHENTICATED_REMEMBERED") %} <img src="{{ asset('/Image/contact.png') }}" class="img-circle" width="50" height="50"> {% else %} {{ 'acreat.mailing.nav.account'|trans }} {% endif %}</a>
<div class="dropdown-menu top dropdown" no-escape aria-labelledby="dropdownMenu1">
<div class="card">
<div class="card-block">
<div class="container-fuild">
<div class="row">
<div class="col-3">
<img src="{{ asset('/Image/contact.png') }}" class="img-circle" width="200" height="112">
</div>
<div class="col-9">
{% if is_granted("IS_AUTHENTICATED_REMEMBERED") %}
<a href="{{ path('fos_user_profile_show') }}" class="dropdown-item">{{ 'acreat.mailing.nav.myaccount'|trans }}</a>
<a href="{{ path('fos_user_change_password') }}" class="dropdown-item">{{ 'acreat.mailing.nav.changepassword'|trans }}</a>
{% if is_granted('ROLE_PREVIOUS_ADMIN') %}
<a href="{{ path('front_index', {'account': '_exit'}) }}" class="dropdown-item">{{'acreat.mailing.admin.impersonalisation'|trans}}</a>
{% endif %}
</div>
</div>
<div class="card-footer text-center">
<a href="{{ path('fos_user_security_logout') }}" class="btn btn-block acreatRed dropdown-item">{{ 'acreat.mailing.nav.logout'|trans }}</a>
{% else %}
<a href="{{ path('fos_user_security_login') }}" class="btn btn-block acreatRed dropdown-item">{{ 'acreat.mailing.nav.login'|trans }}</a>
</div>
{% endif %}
</div>
</div>
</div>
</li>
</ul>
<div class="search d-inline inline pull-right">
<a href="#" onclick="showAndHide()" id='icon' ><i class="fa fa-search fa-2x" aria-hidden="true"></i></a>
<form class="form-inline waves-effect waves-light" id="form">
<input class="form-control tags inline" id="search" type="text" placeholder="Search" onkeydown="keyDown()">
</form>
</div>
<div class="inline pull-right spanSearch">
<h5>{% block badge_research %}{% endblock %}</h5>
</div>
</div>
</div>
</div>
{% if is_granted("IS_AUTHENTICATED_REMEMBERED") %}
{% block navbar %}
<div class="sidebar blue-grey darken-4 no-escape" id="navbar">
<div class="user-box no-escape">
<a class="logo no-escape" href="/" title="Retour a l'accueil">
<img src ="https://www.acreat.com/sites/acreat.com/themes/acreat/images/logo.png" class="img-fluid text-center no-escape"></img>
</a>
<h5 class="text-center">{{ 'acreat.mailing.title.website'|trans }}</h5>
</div>
<div class="list-group panel no-escape" aria-expanded="true">
<a href="/" id="dashboard" class="list-group-item no-escape" data-parent="#sidebar" aria-expanded="false"><i class="fa fa-dashboard margin-right"></i> <span>{{ 'acreat.mailing.nav.dashboard'|trans }}</span> </a>
<a href="#menu0" class="list-group-item no-escape arrowContainer" data-toggle="collapse" data-parent="#sidebar" aria-expanded="true"><i class="fa fa-tasks margin-right"></i><span>{{ 'acreat.mailing.nav.inbox'|trans }}<i class="fa fa-angle-down" id="wrapperArrow"></i></span></a>
<div class="collapse show no-escape" id="menu0">
<a href="/message/template/{{app.user.id}}" class="list-group-item no-escape" id="addmessage" data-parent="#sidebar" aria-expanded="true">
<span>{{ 'acreat.mailing.nav.addmessage'|trans }}</span>
</a>
{%- set numberNotSent = doctrine.createQueryBuilder().select('COUNT(u.id)').from('CoreBundle:Message', 'u').where("u.status !='COMPLETED'")
.andWhere("u.account = " ~ app.user.id).andWhere("u.status !='SUBMITTED'").getQuery().getResult() -%}
<a href="/message/viewNotSent" class="list-group-item no-escape" data-parent="#sidebar" id="viewNotSent" aria-expanded="true">
<span class="fixed-witdh">{{ 'acreat.mailing.nav.messagenotsent'|trans }}</span>
<span class="badge badge-primary badge-pill">{{ numberNotSent[0][1] }}</span>
</a>
{%- set numberSent = doctrine.createQueryBuilder().select('COUNT(u.id)').from('CoreBundle:Message', 'u').where("u.status ='COMPLETED'")
.andWhere("u.account = " ~ app.user.id).getQuery().getResult() -%}
<a href="/message/viewSent" class="list-group-item no-escape" id="viewSent" data-parent="#sidebar" aria-expanded="true">
<span class="fixed-witdh">{{ 'acreat.mailing.nav.messagesent'|trans }}</span>
<span class="badge badge-primary badge-pill">{{ numberSent[0][1] }}</span>
</a>
<a href="/message/viewDraft" class="list-group-item no-escape" id="draft" data-parent="#sidebar" aria-expanded="true">
<span>{{ 'acreat.mailing.nav.draft'|trans }}</span>
</a>
</div>
<a href="/mailinglist/view" class="list-group-item no-escape" id="listview" data-parent="#sidebar" aria-expanded="false"><i class="fa fa-list margin-right"></i> <span>{{ 'acreat.mailing.nav.mailinglist'|trans }}</span> </a>
<a href="/member/view" class="list-group-item no-escape" id="memberview" data-parent="#sidebar" aria-expanded="false" ><i class="fa fa-users margin-right"></i> <span>{{ 'acreat.mailing.nav.member'|trans }}</span></a>
{%- if is_granted('ROLE_ADMIN') -%}
<div id="adminBottom" class="no-escape">
<a href="#menu4" class="list-group-item no-escape bottom arrowContainer2" data-toggle="collapse" data-parent="#sidebar" aria-expanded="true"><i class="fa fa-envelope margin-right"></i> <span >{{ 'acreat.mailing.nav.administration'|trans }}<i class="fa fa-angle-down" id="wrapperArrow2"></i></span></a>
<div class="collapse show no-escape" id="menu4">
<a href="/admin/mailinglist" class="list-group-item no-escape" id="adminlist" data-parent="#menu4">{{ 'acreat.mailing.nav.administrationlist'|trans }}</a>
<a href="/admin/account/view" class="list-group-item no-escape" id='adminaccount' data-parent="#menu4">{{ 'acreat.mailing.nav.administrationaccount'|trans }}</a>
<a href="/admin/message" class="list-group-item no-escape" id="adminmessage" data-parent="#menu4">{{ 'acreat.mailing.nav.administrationnewsletter'|trans }}</a>
<a href="/admin/parameters" class="list-group-item no-escape" id="adminparameters" data-parent="#menu4">{{ 'acreat.mailing.nav.administrationparameters'|trans }}</a>
</div>
</div>
{%- endif -%}
</div>
</div>
{% endblock navbar %}
{%- endif -%}
<div id="content">
{% block body %}
{%- if app.user == false -%}
<main class="col-12 col-md-12 col-xs-12 col-lg-12 col-xl-12">
{%- else -%}
<main class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 ">
{%- endif -%}
{% block flashmessage %}
{% for flashMessage in app.session.flashbag.get('notice') %}
<div class="alert alert-success" role="alert">
{{ flashMessage }}
</div>
{% endfor %}
{% for flashMessage in app.session.flashbag.get('fail') %}
<div class="alert alert-danger" role="alert">
{{ flashMessage }}
</div>
{% endfor %}
{% for flashMessage in app.session.flashbag.get('success') %}
<div class="alert alert-success" role="alert">
{{ flashMessage }}
</div>
{% endfor %}
{% endblock flashmessage %}
{% block main %}
{%- block breadcrumb -%}{%- endblock -%}
<section></section>
{%- block confirmation -%}{%- endblock -%}
{% endblock main %}
{% block fos_user_content %}
{% endblock fos_user_content%}
</main>
{% endblock body %}
</div>
</div>
</body>
{% block footer %}
{% block footer_javascript %}
<script src="{{ asset('bundles/fosjsrouting/js/router.js') }}"></script>
<script src="{{ path('fos_js_routing_js', { callback: 'fos.Router.setData' }) }}"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="{{ asset('/bundles/front/components/MDBootstrap/js/tether.min.js') }}"></script>
<script type="text/javascript" src="{{asset('bundles/front/components/moment/min/moment.min.js') }}"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="{{ asset('/bundles/front/components/MDBootstrap/js/bootstrap.min.js') }}"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="{{ asset('/bundles/front/components/MDBootstrap/js/mdb.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('/bundles/front/components/jquery-ui/jquery-ui.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('/bundles/front/js/libraries.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('/bundles/front/js/acreatmailingfront.min.js') }}"></script>
{% endblock footer_javascript %}
{% endblock footer %}
</html>И я хотел бы знать, есть ли какое-нибудь решение более простое, если использовать твист, если тег похож:
<a href="#" class="...{% if menu1 is not defined %} collapsed {% endif %}>...</a>Потому что я не могу установить его с помощью jQuery или javascript, когда пользователь решил показать или скрыть это меню, потому что мой макет регенерируется при перезагрузке моей страницы или при изменении моей страницы ...
Если у кого-нибудь есть идея, дайте мне знать!
[РЕДАКТИРОВАТЬ] Более ясный вопрос: как я могу изменить класс моего предмета в соответствии с comportement пользователя, если он нажал, чтобы отбросить меню, а затем отпустите меню до тех пор, пока он щелкнул в другое время
Заранее спасибо !
00JavaScript, JQuery, Symfony, выпадающее меню, веточка,