Swap classes with Jquery ToggleClass

Question

Swap classes with Jquery ToggleClass

Navigation

#1 by (2 votes)

1

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

Thanks

jquery css

asked by Gaston Coroleu 30.03.2018 в 02:15

source

1 answer

protect my routes - print my Json How do I make a variable of the same type of class in Javascript?

score 2 · Accepted Answer

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

<!DOCTYPE html>
<html lang="es">
<head>
<title>submenuclickopen</title>
<style>
  #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;} */

</style>
</head>
<body>
<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>
     </ul>
   </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>
     </ul>
   </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>
     </ul>
   </li>
 </ul>
</div>
</body>
<script
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E="
crossorigin="anonymous"></script><script>
$("#menu ul.mainmenu > li > a").click(function(){
// descomentar esta línea es para ocultar los otros submenus
/*    $(this).parent().parent().find("li").removeClass("mostrarsubmenu"); */
    $(this).parent().toggleClass("mostrarsubmenu");
});
</script>
</html>