Issue
I have the following code that builds my menu.
$(".btn-show").click(function(e) {
e.preventDefault();
el = $(this).data('element');
$(el).show();
$("section > div").not(el).hide();
});
<link href="https://demo.dashboardpack.com/architectui-html-free/main.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://demo.dashboardpack.com/architectui-html-free/assets/scripts/main.js"></script>
<div class="app-container app-theme-white body-tabs-shadow fixed-sidebar fixed-header">
<div class="app-header header-shadow">
<div class="app-header__mobile-menu">
<div>
<button type="button" class="hamburger hamburger--elastic mobile-toggle-nav">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
</div>
</div>
</div>
<div class="app-main">
<div class="app-sidebar sidebar-shadow">
<div class="scrollbar-sidebar">
<div class="app-sidebar__inner">
<ul class="vertical-nav-menu">
<li class="app-sidebar__heading">SERVIÇOS</li>
<li>
<a href="#">
<i class="metismenu-icon pe-7s-tools"></i>
Requisições
</a>
<ul>
<li class="nav-item">
<a href="s6" data-element="#minhaDiv6" class="nav-link btn-show atua-ped mobile-toggle-nav">
<i class="metismenu-icon pe-7s-cart"></i>
Luvas
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<section id="s6">
<div style="display:none;" id="minhaDiv6">
Teste
</div>
</section>
</div>
</div>
When I use the application on my cell phone, I want it to close the automatic menu and change the hamburger symbol when clicking on a menu link.
If you open the menu and close on hamburger, everything works fine. But when I open the menu and click on the link to open the section, the menu closes but the hamburger symbol remains the X for close, but I should also change it.
I use the following code in the link to close the menu when I click.
mobile-toggle-nav
Can you help resolve the problem?
Solution
Added one line to JS code
$(".btn-show").click(function(e) {
e.preventDefault();
el = $(this).data('element');
$(el).show();
$("section > div").not(el).hide();
$("button.hamburger").removeClass("is-active"); // add this line
});
<link href="https://demo.dashboardpack.com/architectui-html-free/main.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://demo.dashboardpack.com/architectui-html-free/assets/scripts/main.js"></script>
<div class="app-container app-theme-white body-tabs-shadow fixed-sidebar fixed-header">
<div class="app-header header-shadow">
<div class="app-header__mobile-menu">
<div>
<button type="button" class="hamburger hamburger--elastic mobile-toggle-nav">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
</div>
</div>
</div>
<div class="app-main">
<div class="app-sidebar sidebar-shadow">
<div class="scrollbar-sidebar">
<div class="app-sidebar__inner">
<ul class="vertical-nav-menu">
<li class="app-sidebar__heading">SERVIÇOS</li>
<li>
<a href="#">
<i class="metismenu-icon pe-7s-tools"></i>
Requisições
</a>
<ul>
<li class="nav-item">
<a href="s6" data-element="#minhaDiv6" class="nav-link btn-show atua-ped mobile-toggle-nav">
<i class="metismenu-icon pe-7s-cart"></i>
Luvas
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<section id="s6">
<div style="display:none;" id="minhaDiv6">
Teste
</div>
</section>
</div>
</div>
Answered By - fanfer
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.