3
I wish that when I clicked on a submenu item, what was active was hidden.
I found a similar script but I had a hard time adapting.
I am using the following script for the onclick submenu
Javascript para Dropdown
var $j = jQuery.noConflict();
$j(".abre-dropdown").click(function(){
$j(this).children("ul").slideToggle();
})
$j("ul").click(function(p){
p.stopPropagation();
})
var $ = jQuery.noConflict();
var checkbox = $('#btn-menu');
$('body').click(function() {
checkbox.prop("checked", false);
});
$('#btn-menu, .menuMobile, .barra-menu').click(function(event) {
event.stopPropagation();
});
HTML from the menu :
<nav class="menuMobile">
<ul>
<li class="item-menu-escuro"><a href="http://<?php echo $url; ?>/home"><label style="float:left;" class="icon-home"></label>Página inicial</a></li>
<li class="abre-dropdown"><a href="javascript:void(0)"><label style="float:left;" class="icon-location"></label>Nossa casa<label class="icon-down-dir"></label></a>
<ul class="submenu-1">
<li class="abre-dropdown"><a href="javascript:void(0)"><label style="float:left;" class="icon-home"></label>Sobre nós<label class="icon-down-dir"></label></a>
<ul class="submenu-2">
<li><a href="http://<?php echo $url; ?>/nossa-casa#terreiro">A casa</a></li>
<li><a href="http://<?php echo $url; ?>/nossa-casa#mae-maria">Mãe Maria C.</a></li>
<li><a href="http://<?php echo $url; ?>/nossa-casa#ogans">Ogans</a></li>
<li><a href="http://<?php echo $url; ?>/nossa-casa#filhos">Filhos</a></li>
</ul>
</li>
<li><a href="http://<?php echo $url; ?>/agenda"><label style="float:left;" class="icon-calendar"></label>Agenda</a></li>
<li><a href="http://<?php echo $url; ?>/localizacao"><label style="float:left;" class="icon-location"></label>Localização</a></li>
<li><a href="http://<?php echo $url; ?>/contato"><label style="float:left;" class="icon-phone"></label>Contato</a></li>
</ul>
</li>
</ul>
</nav>
It didn’t work. I don’t know if I implemented it correctly. What I did was replace what Voce went through a similar part, and so it went on the same way. Then I added below what already existed, and when clicking the submenu went down and went up automatically..
– Cobra
@Thiagobarros. The right one was to replace even, would have as prepapar a Jsfiddle, with a similar operation to that of its site? It would be easier.
– Samir Braga
I’m trying to create Jsfiddle, but the script is not working so that the submenu can be clicked.. The code I’m trying to use in Jsfiddle is the same as the question.
– Cobra
@Thiagobarros, look at this example. It suits you?
– Samir Braga
I tried to add a second level submenu. However, when clicked, the whole menu hides again.. how could I add more levels? My javascript understands all subsmenus, but does not have the function to hide one when the other is active..
– Cobra
@Thiagobarros, I get it. I’m going to fix this and I warn you.
– Samir Braga
All right! Thank you!
– Cobra
@Thiagobarros, look at the edition. I imagine that now serves. rsrs
– Samir Braga
Perfect! Thanks for the help, it’s exactly what I imagined! Now I have to adapt to my menu! Congratulations ;)
– Cobra