Swap classes with Jquery ToggleClass


I'm trying to show / hide a submenu when I click on the item in that menu (WORKS).

By default my submenu is "hidden" with CSS

.children {
   position: fixed;
   opacity: 0;

and I need to click on it to show it by exchanging with this class

.children-1 {
    position: inherit;
    opacity: 1;
    left: auto;
    margin-left: 30px;
    transform: translateX(0px);

The script that I am using is this

    jQuery(function ($) {
       $( 'children' ).click(function() {
            $( this ).toggleClass( 'children-1' );

The site is link


asked by Gaston Coroleu 30.03.2018 в 02:15

1 answer


The click should go on the parent of what is hidden. Here is a functional example:

<!DOCTYPE html>
<html lang="es">
  #menu ul, #menu ul li {display:block;padding:0;margin:0;}
  #menu ul {list-style:none;background:#eee;}
  #menu ul li {display:block;width:25%}
  #menu ul.mainmenu li {float:left;text-align:center;background:#ddd;}
  #menu ul.submenu li {float:none;text-align:left;background:#ccc;width:100%;}
  #menu ul.mainmenu a {padding:5px 10px;}
  #menu ul li.separador {text-indent:-9999px;border-bottom:1px solid black;height: 5px;}
  #menu ul.submenu {display:none;}

  #menu ul.mainmenu li.mostrarsubmenu ul.submenu {display:block;}

  /* descomentar para rollover */
  /* #menu ul.mainmenu li:hover ul.submenu {display:block;} */

<div id="menu">
 <ul class="mainmenu">
    <li><a href="#main1">main menu item 1</a>
     <ul class="submenu">
       <li><a href="#sub11">submenu 1</a></li>
       <li><a href="#sub12">submenu 2</a></li>
       <li class="separador">---</li>
       <li><a href="#sub13">submenu 3</a></li>
    <li><a href="#main2">main menu item 2</a>
     <ul class="submenu">
       <li><a href="#sub21">submenu 1</a></li>
       <li class="separador">---</li>
       <li><a href="#sub22">submenu 2</a></li>
       <li><a href="#sub23">submenu 3</a></li>
    <li><a href="#main3">main menu item 3</a>
     <ul class="submenu">
       <li><a href="#sub31">submenu 1</a></li>
       <li class="separador">---</li>
       <li><a href="#sub32">submenu 2</a></li>
       <li><a href="#sub33">submenu 3</a></li>
$("#menu ul.mainmenu > li > a").click(function(){
// descomentar esta línea es para ocultar los otros submenus
/*    $(this).parent().parent().find("li").removeClass("mostrarsubmenu"); */
answered by 30.03.2018 / 03:15