Prevent all slideUp functions from firing on one element only

Question

I created a drop-down menu but the menu is designed so that it can easily be changed without any HTML knowledge. Hence, the navigation tabs and the drop-down menu's are not within the same elements.

Also all the navigation tabs are separate elements (so that the pages can be edited, deleted, or created without HTML knowledge), hence to call each element is as follows:

The navigation tabs are:

#PageList1 ul li:first-child,
#PageList1 ul li:first-child + li
#PageList1 ul li:first-child + li + li

etc

The drop-down menu's are:

#Label1
#Label2
#Label3

etc

As a result, when #PageList1 ul li:first-child is hovered, #Label1 is triggered to slideDown. etc

In order for this to work without any drop-down menus (#Labels) staying open, I had to put slideUp events on the #Label1 (and all other #Label id's) when the mouse hovered certain areas: #main, #header, or another #Label.

Now I am working a certain page using conditional tags and I need to remove all slideUp events from a certain dropdown-menu (#Label1).

Is there a way to this?

Since slideUp events are not part of a bind, I cant use unbind, detach, or remove all slideUp events.

I tried to get something like this to work (but no luck):

(Clearing a jquery document.ready() call)

(Prevent jQuery ready handlers from firing)

To get around it, I tried to clone the #Label1 and appendTo a new div, hoping it would remove all triggered events attached to #Label1 but nope.

HTML:

<b:widget id='PageList1' locked='false' title='' type='PageList'>

Then further down in a seperate continaerr is:

<b:section class='main' id='blank' showaddelement='yes'>
  <b:widget id='Label1' locked='false' title='' type='Label'>....</b:widget>
</b:section>
<b:section class='label-wrapper' id='house' showaddelement='yes'>
  <b:widget id='Label2' locked='false' title='' type='Label'>...</b:widget>
</b:section>
<b:section class='label-wrapper' id='garage' showaddelement='yes'>
  <b:widget id='Label3' locked='false' title='' type='Label'>...</b:widget>
</b:section>

etc...

Jquery:

$(document).ready(function(){
    $("#PageList1 ul li:first-child a").hover(function(){
        $("#Label1").slideDown(130);   
    });
    $("#Label1").mouseleave(function(){
        $("#Label1").slideUp(130);
    });
});

etc...

Answer 1

I don't entirely understand your approach to the whole thing, but perhaps the following would help:

Change the code that calls .slideUp() so that it only calls it on elements that do not have a specific class, say "noSlideUp", and then add that class to elements as needed. So your mouseleave handler would look like this:

$("#Label2").mouseleave(function(){
    $("#Label1").not(".noSlideUp").slideUp(130);
});

...and then elsewhere when you want to prevent slideUp on "#Label1" you'd do this:

$("#Label1").addClass("noSlideUp");

...and if you later want to re-enable slideUp on that element you'd remove the class again:

$("#Label1").removeClass("noSlideUp");

This concept is a little bit clunky because you'd have to include .not(".noSlideUp") everywhere that calls .slideUp(), but it would do what you want.