javascript - Unable to remove a class from an element once it has been added -
problem recreatable @ following url :
http://streeten-new.streeten.co.uk/
- click hamburger open navigation
- click "services"
- click "< services" inside submenu try , go back
for reason, removeclass not removing 'submenuactive" class. know sure targeting right element, because adding test class works without issue.
i have tried using pure javascript instead of jquery this, have tried changing css directly jquery, rather adding/removing class - in cases i'm unable undo changes make element when submenu first opens.
it's frustrating because opening dev tools , highlighting
<ul class="submenuactive">
then unticking
.submenuactive { left: 0!important; }
rule hides submenu want work, reason cannot working on click.
html code added:
<nav> <div class="navigation"> <ul > <li><a href="#">studio</a></li> <li class="parent"><a href="#">projects</a> <ul> <li><a href="#">portfolio</a></li> <li><a href="#">case studies</a></li> </ul> </li> <li class="parent"><a href="#">services</a> <ul> <li class="menutitle"><span class="backarrow">❮</span> services</li> <li><a href="#">branding</a></li> <li><a href="#">web design</a></li> <li><a href="#">online marketing</a></li> <li><a href="#">marketing</a></li> </ul> </li> <li><a href="#">blog</a></li> <li><a href="#">contact</a></li> </ul> <a id="tel" href="tel:02076313720"><button>call now</button></a> <!-- <p>for free design consultation</p>--> </div> </nav>
javascript code added:
$(".parent").click(function(){ $(this).find("ul").first().addclass("submenuactive"); }); $(".menutitle").click(function(){ $(this).closest("ul").removeclass("submenuactive"); $(this).closest("ul").addclass("test"); });
when click on submenu item, click event bubbles dom , re-triggers click on parent. try suppress with:
$(".menutitle").click(function(e){ e.stoppropagation(); $(this).closest("ul").removeclass("submenuactive"); $(this).closest("ul").addclass("test"); });
Comments
Post a Comment