When I click on one of the links with sublinks, it “eats” the regular link below it. What can I add to the nextUntil() method to prevent this from happening?
@Sup3rkirbyOct 21.2014 — #Personally I'm a bit confused as to where your question fits. There really isn't any javascript involved (jQuery is being used instead), but even so, your issue could be fixed with a simple change to the HTML.
Anyway, the easiest solution is to add the '[I]main[/I]' class to your Regular Links. Since your jQuery is checking for the next '[B][I].main[/I][/B]' class it '[I]eats[/I]' your regular link and stops at the next element with the class '[I]main[/I]' (which is the next main link, or nothing for the last set).
If for some reason you simply can't add the '[I]main[/I]' class to those links then you'll want to make a new class (we'll call it '[I]regLink[/I]') and this class needs to be applied to all main and regular links (for the sake of working in all scenarios and not this specific one you presented today). Then of course in the [B]nextUntil()[/B] function you would change '[B][I].main[/I][/B]' to '[B][I].regLink[/I][/B]' (or whatever you called this new class).
@E_MauthorOct 21.2014 — #Is there a different method I could use instead of nextUntil()...one that stops when it comes to the last '.sub' class OR one that stops when it finds any class but '.sub'?
@E_MauthorOct 21.2014 — #It's going to be difficult to add an additional class to all regular links as the project I'm working on has a TON of regular links. It would be very helpful if I could resolve this by adding an additional parameter to the nextUntil() method or using a more appropriate method.
@Sup3rkirbyOct 21.2014 — #Unfortunately in your case it all comes down to the fact that you don't have your HTML/CSS set up to do what you want. The jQuery functions available for this sort of thing won't work for your specific situation. One big flaw seems to be that you are treating your 'sub links' as normal links, rather than nesting them. Because of this they are not children or 'sub links' as far as the HTML markup is concerned. They are equal to the main links and regular links in every way other than class name, but in that sense they are indistinguishable from any other set of sub links.
No matter how you look at this, short of writing an overly complex snippet of javascript logic (which would even then only work for very specific cases), you're going to have to change something in your code or markup.
You could follow a proper nested format and make your HTML structure match your menu with something like: [code=html] <ul class=""> <li><a href="#" class="dark-link">Regular Link</a></li> <li><a href="#" class="dark-link main">Main Link 1</a> <ul> <li><a class="dark-link sub">Sublink 1</a></li> <li><a class="dark-link sub">Sublink 2</a></li> <li><a class="dark-link sub">Sublink 3</a></li> </ul> </li> <li><a href="#" class="dark-link">Regular Link</a></li>
<li><a href="#" class="dark-link main">Main Link 2</a> <ul> <li><a class="dark-link sub">Sublink 1</a></li> <li><a class="dark-link sub">Sublink 2</a></li> <li><a class="dark-link sub">Sublink 3</a></li> <li><a class="dark-link sub">Sublink 4</a></li> </ul> </li> <li><a href="#" class="dark-link">Regular Link</a></li> </ul> [/code] Obviously that would require a fair amount of work from you, however it's the difference between 'good code' and 'bad code' to be brutally honest. The fact is you have a nested link structure for your nav but no nested markup in your HTML that represents it. So again, there is no way to truly distinguish which sub links you need to manipulate without running into issues.
Fixing your HTML structure would allow you to use something like the following in your jQuery: [CODE] $(document).ready(function(){ $('.sub').parent().parent().hide(); $('.main').click(function(event){ event.preventDefault(); $(this).nextAll("ul", "a").slideToggle('fast'); }); }); [/CODE] Though I must admit I'm not a fan of the [B].parent().parent()[/B] method. I'm sure there's a better way to handle the hiding (eg. actually setting a CSS class to hide [B][I].sub[/I][/B] elements instead of forcing jQuery to do it when the page loads).
Of course, above is just one real solution to your problem. Another would be my original suggestion, which might be slightly less work for you in the end, but it's not nearly as good of a solution overall.
@E_MauthorOct 22.2014 — #I agree that a nested format would work much better. It'll take more time to re-code everything but I think I'll go this route.