Enforce click in ul>li parent

Been battling with this for a while now and know I must be close. Will try explain as best as I can.

I have a menu that opens/collapses above and below 580px respectively. From desktop all is good. On a mobile going from portrait to landscape will change the menu from collapsed to open as wanted.

From collapsed to open all li under ul subnav are successfully closed. The problem is that I cannot close the parent of the closed ul>subnav>li.

I have along the lines of

<#nav>
<ul>
<li class=bcolor1>heading</li>
<ul class = subnav>
 li / li /li / li / li / li
</ul>

I need to enforce a click in heading.

I got this so far…how on earth can I target an active li parent and enforce a click

function clearNav (){
   //check if active class exists on click, if so close and set inactive
   if ($("#nav>ul>li").find(".subnav").hasClass('active')){
	   console.log('sub active');
	   $("#nav>ul>li").find(".active").parent().click();
	   $("#nav>ul>li").find(".subnav").toggleClass('active');
	   $("#nav>ul>li").find(".subnav").css ({"display":"none"});
	   $("#nav>ul>li").find(".mobile-arrow").removeClass("rotate"); 
	   $('#nav>ul, #nav>ul>li, .subnav li, .sub_subnav li').unbind("touchstart touchend mouseenter mouseleave click");
   }
} 

Thanks for looking

Can you toss up what you have live somewhere, or pop it into a http://jsfiddle.net/ if you’re familiar with that? I’m having a hard time visualizing this.

Here are some other questions:

  1. When you say “I cannot close the parent of the closed ul>subnav>li”, do you mean it’s literal parent or an ancestor (a few parents up)?

    .parent() // gets it’s immediate parent
    .closest(SELECTOR) // gets the closest matching ancestor

  2. I feel you have way too much JavaScript going on, when a simple .removeClass('active') would probably do. Can I see the exact HTML for the #nav?

Hi OzRamos, thanks for your reply.

Believe me, the snippet I provided is just the start of it! The code has got a little messy… mainly due to having accommodate touchstart/slick/hover at two different media widths and previous issues of preventdefault stopping a menu scroll. I think it would take too long to recreate this problem in a fiddle.

By the parent of an active ul>subnav>li… I mean from the html sample li bcolor1.

Prior to removing touchstart from a function (due to the said of prevent default problem) going from <580px with touchstart/click binded… to >580px where touchstart/click was unbinded was not a problem. All nav ul & li would close.

It’s tricky to explain. I’m going to have another crack at it tomorrow… If no joy, i’ll probably leave it and come back to it, or pay someone to do it tidy!

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.