jQuery Help - Adding if statement to hover menu?

The following code will slide down a subnav menu on hover and then slide up once you mouse away from it.  But, on specific pages, I'd like the subnav to automatically default to slide down and slide up when you mouse over the other menu.  Can't figure out how to do that....  

So, I have three pages: Home, First Menu Item, and Second Menu Item.  

On the Home page, all the subnav menus are closed.  On the First Menu Item Page, I want the subnav for "first menu item" to load in an open state.  But, if I mouse over "second menu item", I want the "first subnavigation" to close and the "second subnavigation" to open.  I'm posting the jQuery and the CSS code below...

I am able to successfully "detect" which page I'm on and just default the subnavigation menus as I want, but I can't figure out how to write the "if" statement in the jQuery function so that if the display state of an element is set to "block" by default, then it should switch to "none" if I mouse over another link...



CSS:

<div class="dropdown-holder">
         <a href="/"> Home </a>
</div>

<div class="dropdown-holder">
                <div class="dropdown-menu">
                <a class="menu-first" href="/first">First Menu Item</a>
                          <div class="down-list" style="display:none">
                                <a href="/first-subnav"> First Subnavigation </a>
                          </div>
                </div>
</div>

<div class="dropdown-holder">
                <div class="dropdown-menu">
                <a class="menu-first" href="/second">Second Menu Item</a>
                          <div class="down-list" style="display:none">
                                <a href="/second-subnav"> Second Subnavigation </a>
                          </div>
                </div>
</div>


$(document).ready(function() {
        $('.down-list').width($('.dropdown-menu').width()+100);
        $('.down-list').height($('.dropdown-menu').height()+25);
        $('.dropdown-menu').hover(
                function() {
                        $('.menu-first', this).addClass('slide-down');
                        $('.down-list', this).slideDown('slow');
                },
 
                function() {
                        obj = this;
                        $('.down-list', this).slideUp('100', function() {
                                $('.menu-first', obj).removeClass('slide-down');
                        });
                }
        );
});

Open in new window

n00b0101Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

szewkamCommented:
Did you really have to detect what menu is open already? Maybe try close all the menus and then open active.
But the if statement will be simple as well. As I can see you give the open element class 'slide-down'. So just select element with this class and close it ;).
$(".slide-down").slideUp('100');
0
n00b0101Author Commented:
Hmm, I tried changing it to the following, but it's not sliding up?

$(document).ready(function() {
        $('.down-list').width($('.dropdown-menu').width()+100);
        $('.down-list').height($('.dropdown-menu').height()+25);
        $('.dropdown-menu').hover(
                function() {
                        $('.menu-first', this).addClass('slide-down');
                        $('.down-list', this).slideDown('slow');
                        $('.slide-down').slideUp('100');

                },
 
                function() {
                        obj = this;
                        $('.down-list', this).slideUp('100', function() {
                                $('.menu-first', obj).removeClass('slide-down');
                        });
                }
        );
});
0
szewkamCommented:
try this :)
$(document).ready(function() {
        $('.down-list').width($('.dropdown-menu').width()+100);
        $('.down-list').height($('.dropdown-menu').height()+25);
        $('.dropdown-menu').hover(
                function() {
						$('.slide-down + .down-list').slideUp('100');
						$('.slide-down').removeClass('slide-down');
                        $('.menu-first', this).addClass('slide-down');
                        $('.down-list', this).slideDown('slow');
                },
 
                function() {
                        obj = this;
                        $('.down-list', this).slideUp('100', function() {
                                $('.menu-first', obj).removeClass('slide-down');
                        });
                }
        );
});

Open in new window

0
szewkamCommented:
in fact i have a question ;).
Does it really necessary to you to add class 'slide-down' when you open a submenu? Because without this usability this script will be much simpler. I change function hover to mouseenter because event mouseenter is trigger only when mouse is moved on the element. Hover triggers every time when mouse moved over an element :)
$(document).ready(function() {
        $('.down-list').width($('.dropdown-menu').width()+100);
        $('.down-list').height($('.dropdown-menu').height()+25);
        $('.dropdown-menu').mouseenter(
                function() {
			$('.down-list:visible').slideUp('100');
			$('.down-list', this).slideDown('slow');
                }
        ).mouseleave(
		function(){
      			$('.down-list', this).slideUp('100');
   		});
 
});

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.