Databases
StackOverflow2013
Postsdbo
POConditional behaviours in a jQuery powered menu
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POConditional behaviours in a jQuery powered menu
    text
    copied!<p>One day on from my first question, I'm afraid to say I'm back. A different problem this time though...</p> <p>I have a horizontal menu with some nested menus as below:</p> <pre><code>&lt;nav&gt; &lt;ul id="mainNav"&gt; &lt;li&gt;&lt;a href="expand-the-sub-menu"&gt;Option 1&lt;/a&gt; &lt;ul id="option1Nav"&gt; &lt;li&gt;&lt;a href="somewhere"&gt;Option 1 Link 1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="somewhere"&gt;Option 1 Link 2&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="somewhere"&gt;Option 1 Link 3&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="somewhere"&gt;Option 1 Link 4&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="somewhere"&gt;Option 1 Link 5&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="expand-the-sub-menu"&gt;Option 2&lt;/a&gt; &lt;ul id="option2Nav"&gt; &lt;li&gt;&lt;a href="somewhere"&gt;Option 2 Link 1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="somewhere"&gt;Option 2 Link 2&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="somewhere"&gt;Option 2 Link 3&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="somewhere"&gt;Option 2 Link 4&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="somewhere"&gt;Option 2 Link 5&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="somewhere"&gt;Option 3&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="somewhere"&gt;Option 4&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="somewhere"&gt;Option 5&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="somewhere"&gt;Option 6&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/nav&gt; </code></pre> <p><a href="https://stackoverflow.com/users/30317/craftyfella">CraftyFella</a> helped <a href="https://stackoverflow.com/questions/11970702/making-jquery-display-the-correct-sub-menu-when-present">yesterday</a> in getting basic behaviours working, but I'd like to expand on this to include conditional behaviours based on the current menu state.</p> <p>The (commented) logic and code so far is as follows:</p> <pre><code>$('#mainNav ul').hide(); $('#mainNav&gt;li&gt;a').click(function(){ var elem = this; // If clicked element has a sibling ul with specified class if($(elem).next().hasClass("navChild")){ // &amp; If another child ul is already visible if ($('.navChild').is(':visible')){ // Fade out any others, and fade this one in $(this).fadeOut(300, 'easeOutQuint', function(){ $(elem).next("ul").fadeIn(300,'easeOutQuint'); }); return false; // Else if no child ul is visible }else{ // Raise main links and fade in current child ul $('nav').animate({bottom:'60px'},300,'easeOutQuint',function(){ $(elem).next().fadeIn(300,'easeOutQuint'); }); } // Else clicked element has no sibling ul with specified class }else{ // If others are visible, fade them out and lower the main links $('#mainNav ul').fadeOut(300, 'easeOutQuint',function(){ $('nav').animate({bottom:'24px'},300,'easeOutQuint'); }); } }); </code></pre> <p>In brief: all sub-menus should be hidden, they should be shown/swapped if present as a clicked sibling, or all hidden if not.</p> <p>Sadly, it doesn't quite work, it almost does except the "swapping" part - if a sub-menu is already visible, and another is triggered to show, both end up being shown, and the clicked element disappears(!).</p> <p>It's probably awful code too - I am still very new to this - but if someone could help with the logic part, I can attend to cleaning things up later on.</p> <p>EDIT - <a href="http://jsfiddle.net/hKYJz/1/" rel="nofollow noreferrer">http://jsfiddle.net/hKYJz/1/</a> - now bizarrely not working at all >:(</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload