Hide submenu when clicking on another

Question

Hide submenu when clicking on another

Navigation

#1 by (2 votes)

3

I would like when I clicked on an item with a submenu, whatever was active would hide.

I found a script similar to mine, but I had difficulty adapting.

I'm using the following script for the subclass with onclick

Javascript for 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(); 
    });

Menu HTML:

<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>

javascript jquery

asked by anonymous 24.01.2016 / 18:41

1 answer

How do I change the width of the columns in the Admin listing in Django? How to list folder files on the network

score 2 · Accepted Answer

Thiago tries to implement this code:

$j(".abre-dropdown a").click(function() {
  var item = $(this).parent();
  $(this).closest('ul').find('ul').not($(this).parent('li').children('ul')).slideUp();
  item.children('ul').slideToggle();
})

Example

Click the bold items.

$('li a').click(function() {
  var item = $(this).parent();
  $(this).closest('ul').find('ul').not($(this).parent('li').children('ul')).slideUp();
  item.children('ul').slideToggle();
})

.hide {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script><ul><li><ahref="#">1. item</a></li>
  <li><a href="#"><b>2. item</b></a>
    <ul class="hide" >
      <li><a href="#"> 2.1. item</a> </li>
      <li><a href="#"> 2.2. item</a> </li>
      <li><a href="#"> <b>2.3. item</b></a>
        <ul class="hide" >
          <li><a href="#"> 2.3.1. item</a> </li>
          <li><a href="#"> 2.3.2. item</a> </li>
          <li><a href="#"> 2.3.3. item</a> </li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="#">3. item</a></li>
  <li><a href="#">4. item</a></li>
  <li><a href="#"><b>5. item</b></a>
    <ul class="hide" >
      <li><a href="#"> <b>5.1. item</b></a>  
        <ul class="hide" >
          <li><a href="#"> 5.1.1. item</a> </li>
          <li><a href="#"> 5.1.2. item</a> </li>
          <li><a href="#"> 5.1.3. item</a> </li>
        </ul>
       </li>
      <li><a href="#"> <b>5.2. item</b></a>  
        <ul class="hide" >
          <li><a href="#"> 5.2.1. item</a> </li>
          <li><a href="#"> 5.2.2. item</a> </li>
          <li><a href="#"> 5.2.3. item</a> </li>
        </ul>
      </li>
      <li><a href="#"> 5.3. item</a> </li>
    </ul>
  </li>
</ul>