This way you'll have to repeat it for each element anyway. The
important thing is to have access to all of them at once, doesn't
matter if by a common class or doing it manually:
var $submenus = $
('.nav_sub_default, .nav_sub_products, .nav_sub_markets,
.nav_sub_tools_support, .nav_sub_news_events, .nav_sub_company');
$submenus.hoverIntent(function(){
$submenus.removeClass('onscreen').addClass('offscreen');
$(this).removeClass('offscreen').addClass('onscreen');
}, function(){ return false });
And that's it. If you create a common class you can shorten the first
line. Note that it's generally faster to redundantly add and remove a
class than to filter the current element to save that operation.
- ricardo
On Jan 13, 7:06 pm, Kean <shenan...@gmail.com> wrote:
> Try this if you can't change your html
>
> (function($) {
> $.fn.replaceClass = function(class1, class2){
> $(this).removeClass(class1).addClass(class2);
> }
>
> })(jQuery);
>
> $('.nav_company').hoverIntent(function() {
> // toggle display of company sub menu content panel
> $
> ('.nav_sub_default, .nav_sub_products, .nav_sub_markets,
> .nav_sub_tools_support, .nav_sub_news_events').replaceClass
> ('onscreen', 'offscreen');
> $('.nav_sub_company').replaceClass('offscreen', 'onscreen');
>
> },
>
> function(){
> return false;
> }
> );
>
> On Jan 13, 8:36 am, "r...@lighthouseuk.net" <r...@50-tuning.com>
> wrote:
>
> > Hi,
> > I'm new to jQuery and liking what I've seen so far.
>
> > I'm curious as to whether I can reduce my code, using chaining
> > perhaps?
>
> > Example...
>
> > $('.nav_company').hoverIntent(function() { // toggle display of
> > company sub menu content panel
> > $('.nav_sub_default').removeClass('onscreen').addClass
> > ('offscreen');
> > $('.nav_sub_company').removeClass('offscreen').addClass
> > ('onscreen');
> > $('.nav_sub_products').removeClass('onscreen').addClass
> > ('offscreen');
> > $('.nav_sub_markets').removeClass('onscreen').addClass
> > ('offscreen');
> > $('.nav_sub_tools_support').removeClass('onscreen').addClass
> > ('offscreen');
> > $('.nav_sub_news_events').removeClass('onscreen').addClass
> > ('offscreen');
> > },function(){
> > return false;
>
> > });
>
> > Based on the fact that there are 6 menu items (nav_sub_x) - I
> > currently have the above code entered 6 times to add and remove the
> > necessary classes from each of the relevant DIVs on the page.
>
> > Is there a cleaner way to do this?
> > Many thanks in advance.
> > Cheers,
> > Rob
