StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POFind Related Class jQuery
text
Body
copied!<p>I have four links, inside of primary-nav, which need to activate a corresponding slideDown element. The links have separate parent classes, <code>.patient > a</code>, <code>.doctor > a</code>, <code>.primary > a</code> and <code>.locations > a</code>.</p> <p>When someone clicks on <code>.patient > a</code> I need ul.patient to be the ul that is targeted. </p> <p>I am kind of experimenting, but this is what I have thus far:</p> <pre><code>var $patientDrop = $('ul.patient'); $patientDrop.hide(); $('.patient > a').click(function() { if ($patientDrop.is(':visible')) { $patientDrop.slideUp(function() { $('.patient > a').removeClass('active'); }); } else { $patientDrop.slideUp(function() { $('.patient > a').removeClass('active'); }); $patientDrop.slideDown(); $('.patient > a').addClass('active'); } }); $('body').click(function(event) { if (!$(event.target).is('a')) { $patientDrop.slideUp(function() { $('.patient > a').removeClass('active'); }); } }); </code></pre> <p>Now, im using variables just for learning, and perhaps they are what is needed here. But my real question, is how to go about this in the most efficient way. I'd hate to have to repeat all of this code four times with different variables just to have it work with each four of the links and their corresponding UL's.</p> <p>Is their any way to, say: <code>primary-nav a, get class of clicked a, find ul with this class</code> And then run the rest of the script?</p> <p>jsFiddle: <a href="http://jsfiddle.net/DRZZr/" rel="nofollow">http://jsfiddle.net/DRZZr/</a></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