Remove active class from toggled element on other element click

Question

In the menu that you see in the jsfiddle https://jsfiddle.net/Adyyda/osnq30bg/1/, if i click on triangle from Item 2 (that has childrens), the childrens show.

If i click on triangle from Item 3, the childrens show.

The problem is that i do not manage to close the childrens from Item 1 which are already active. Tried all sort of solutions regarding toggle but in this particular case i miss something to make it happen?


     Menu
    
        
            Item 1
            Item 2▼
                
                    Child Item 1
                    Child Item 2
                    Child Item 3
                
            
            Item 3▼
                
                    Child Item 1
                    Child Item 2
                
            
            Item 4
            Item 5
        
    


// Multi-Toggle Navigation
$(function() {
    $('body').addClass('js');
        var $menu = $('#menu'),
            $menulink = $('.menu-link'),
            $menuTrigger = $('.has-subnav');

    $menulink.click(function(e) {
        e.preventDefault();
        $menulink.toggleClass('active');
        $menu.toggleClass('active');
    });

    $menuTrigger.click(function(e) {
        e.preventDefault();
        var $this = $(this);
        $this.toggleClass('active').next('ul').toggleClass('active');
    });

});

// Remove "Active" Class from Menu on Resize
$(window).resize(function() {
    var viewportWidth = $(window).width();
        if (viewportWidth > 925) {
            $("#menu").removeClass("active");
        }
});


a.menu-link {
  color: #000;
  display: block;
  text-decoration: none;
}

.menu-link span {
  border-bottom: solid 3px #000;
  border-top: double 10px #000;
  display: inline-block;
  height: 4px;
  margin: 0 5px -3px 0;
  width: 30px;
}

.menu-link:hover span { border-color: #666; }

.menu, .menu > ul, .menu > ul ul {
  clear: both;
  display: flex;
  flex-flow: column;
  margin: 0;
}

.menu.active {
  background: #f9f9f9;
  border-bottom: 1px solid #d8d8d8;
  border-top: 1px solid #d8d8d8;
  margin: 1em 0 1em -12px;
  max-height: 55em;
  width: 200px;
  float: left;
}

.js .menu > ul ul.active {
  margin: 0;
  max-height: 55em;
  padding: 0;
}

.menu > ul { padding: 0; }

nav li {
  display: inline-block;
  margin: 0;
  position: relative;
}

.menu li a {
  color: #000;
  display: inline-block;
  font-size: 1.04em;
  letter-spacing: .05em;
  line-height: 2.5em;
  text-decoration: none;
}

span.has-subnav {
  display: block;
  font-size: 1em;
  line-height: 2.5em;
  position: absolute;
  right: 20px;
  padding: 0 0.5em;
  top: 0;
}
 @media screen and (max-width:800px) {

.menu,  .menu > ul ul {
  margin: 0;
  max-height: 0;
  overflow: hidden;
}

.menu li a {
  border-bottom: 1px solid #d8d8d8;
  display: block;
  padding-left: 15px;
}

.menu li li a { padding-left: 50px; }

.menu li:last-child a { border: none; }

.menu li li:last-child a { border-bottom: 1px solid #d8d8d8; }

.menu li:hover { background: #EDEDED; }
}
@media screen and (min-width: 801px) {

nav {
  border-top: 3px solid #00578b;
  border-bottom: 1px solid #a4d05e;
}

a.menu-link { display: none; }

.js .menu,  .js .menu > ul ul {
  max-height: none;
  overflow: visible;
}

.js .menu > ul li:hover > ul { display: flex; }

.menu ul {
  display: flex;
  flex-flow: row;
  height: 44px;
  justify-content: space-between;
  margin: 0;
  padding: 0;
}

.menu span.has-subnav { display: none; }

.menu li a:hover { color: rgb(164,208,94); }

.menu li li a:hover {
  background: rgba(164,208,94,0.1);
  color: #000;
}

.menu ul ul {
  background: #fff;
  border: solid 1px rgba(164,208,94,1);
  border-radius: 2px 2px 5px 5px;
  border-top: solid 2px transparent;
  display: none;
  height: auto;
  overflow: hidden;
  padding: 0;
  position: absolute;
  text-align: left;
  top: 43px;
  width: 150px;
  z-index: 999;
}

.chrome .js .menu > ul ul { top: 43px; }

.menu ul ul.wide { width: 300px; }

.menu ul ul li {
  border-bottom: solid 1px rgba(164,208,94,0.5);
  display: inline-block;
  position: relative;
}

.menu > ul ul li:last-child { border-bottom: none; }

.menu ul ul li a {
  display: block;
  padding-left: 10px;
}
}

Kaddath · Accepted Answer

There is nowhere in your $menuTrigger.click function where you "tell" others dropdowns to close, actually. You can do it by closing each opened one before opening the clicked one (you have to test if it's not the one you clicked too, or else you can't close anymore, the clicked item being closed before being toggled):

$menuTrigger.click(function(e) {
    e.preventDefault();
    var $this = $(this);
    $menuTrigger.each(function(){
        if(!$this.is($(this)) && $(this).hasClass('active')){
            $(this).removeClass('active').next('ul').removeClass('active');
        }
    });
    $this.toggleClass('active').next('ul').toggleClass('active');
});

see forked updated fiddle here

EDIT:

To close your menu dropdowns when menu is closed you can add a similar each in $menulink.click;

$menulink.click(function(e) {
    e.preventDefault();
    $menulink.toggleClass('active');
    $menu.toggleClass('active');
    $menuTrigger.each(function(){
        if($(this).hasClass('active')){
            $(this).removeClass('active').next('ul').removeClass('active');
        }
    });
});

Then, to close the menu when clicked outside, you can add such event to body and html (we have to add an id to the burger span to be able to detect if not clicked on it too).:

var $menuBurger = $('#menu-burger');

$('body, html').click(function(e) {
    var target = $(e.originalEvent.target);
    if(!target.is($menulink) && !target.is($menu) && !target.is($menuTrigger) && !target.is($menuBurger)){
        $menulink.removeClass('active');
        $menu.removeClass('active');
    }
});

updated fiddle

Remove active class from toggled element on other element click

Answers (1)

Related Questions