javascript - Remove mouseenter from an element then restore it (for a jQuery dropdown nav) -


i'm trying create drop down menu using jquery.

i've got working problem can still hover on subnav that's sliding out while new 1 sliding in. results in menu flashing between 2 because mouseenter encompasses of child elements.

i need way remove mouseenter subnav ul while it's animating restore once it's done. works fine if change .slideup(300, 'swing') .css('display', 'none') disappears abruptly.

update: set link can see effect. http://samlester.net/nav/

my html in following format:

<nav id="main-nav">     <ul>         <li><a href="#" id="home" class="current">home</a></li>       <li>            <a href="#">page 1</a>          <ul id="page1-subnav">                 <li><a href="#">page 1-1</a></li>                 <li><a href="#">page 1-2</a></li>              </ul>         </li>         <li><a href="#">page 2</a></li>     </ul> </nav>

and here's javascript i've got far...

$(document).ready(function() {  var nav = $("#main-nav");  nav.find("li").each(function() {     if ($(this).find("ul").length > 0) {          //show submenus on hover         $(this).mouseenter(function() {             $(this).find("ul").stop(true, true).slidedown(300, 'swing');         });          //hide submenus on exit         $(this).mouseleave(function() {             $(this).find("ul").stop(true, true).slideup(300, 'swing');         });     } });  });

thanks, sam

try - same concept before logic plugged in.

html:

<nav id="main-nav">     <ul>         <li><a href="#" id="home" class="current">home</a></li>         <li>             <a href="#">page 1</a>             <ul id="page1-subnav">                 <li><a href="#">page 1-1</a></li>                 <li><a href="#">page 1-2</a></li>              </ul>         </li>         <li><a href="#">page 2</a></li>         <li>             <a href="#">page 3</a>             <ul id="page3-subnav">                 <li><a href="#">page 3-1</a></li>                 <li><a href="#">page 3-2</a></li>              </ul>         </li>         <li>             <a href="#">page 4</a>             <ul id="page4-subnav">                 <li><a href="#">page 4-1</a></li>                 <li><a href="#">page 4-2</a></li>              </ul>         </li>     </ul> </nav>

css:

#main-nav ul li ul {display:none;}

js:

$(document).ready(function()  {     var nav = $("#main-nav");      nav.find("li").each(function()      {         if ($(this).find("ul").length > 0)          {             //show submenus on hover             $(this).mouseenter(function(event)              {                 event.stoppropagation();                  if($(this).children('ul').data('interactive') !== false)                 {                     $(this).children('ul').data('interactive',false);                     $(this).find("ul").stop(true, true).slidedown(300, 'swing', function(){$(this).data('interactive',true)});                 }             });              //hide submenus on exit             $(this).mouseleave(function(event)             {                 event.stoppropagation();                  // no if statement here - force close on mouseleave                 $(this).children('ul').data('interactive',false);                 $(this).find("ul").stop(true, true).slideup(300, 'swing', function(){$(this).data('interactive',true)});              });         }     }); });

http://jsfiddle.net/je8uh/1/


Comments

Post a Comment

Popular posts from this blog

c++ - Is it possible to compile a VST on linux? -

for class project i'm attempting write vst plugin backed cuda. current cuda workflow on linux box, i'd prefer compile , link there. according wikipedia , should possible (i couldn't find steinberg documentation relevant linux) can't find makefile or instructions on how build if aren't using xcode or visual studio. i'm vst 3 sdk doesn't support linux. when try compile plugin under linux, error: ./base/source/fatomic.cpp:39:30: fatal error: libkern/osatomic.h: no such file or directory this issue caused following code in "vst3 sdk/base/source/fatomic.cpp" #if mac #include <libkern/osatomic.h> #if mac_os_x_version_min_required > mac_os_x_version_10_4 #define native_atomic_type (volatile int32_t*) #else #define native_atomic_type (int32_t*) #endif #elif windows #include <windows.h> #endif but hope compiling under linux work vst sdk 2.4. reading. jvstwrapper seems run on lin...
Read more

java - Output of Eclipse is rubbish -

i want write program in eclipse language different english. when display output using system.out program, displays output correctly in console editor. when accept input console , output it, output rubbish. how can solve it. many thnaks i'm not sure if problem, have character encoding problem. make sure you're using unicode, utf-8. you can read more @ official docs converting non-unicode text .
Read more

jquery - Confused with JSON data and normal data in Django ajax request -

i read json internet still have not got grasp of it. reading article http://webcloud.se/log/ajax-in-django-with-jquery/ i not understood first part function using json def xhr_test(request, format): if request.is_ajax(): if format == 'xml': mimetype = 'application/xml' if format == 'json': mimetype = 'application/javascript' data = serializers.serialize(format, examplemodel.objects.all()) return httpresponse(data,mimetype) # if want prevent non xhr calls else: return httpresponse(status=400) my main problems are from function getting format variable does format json mean data given function json or data recived json can give me simple example ouput of function data = serializers.serialize(format, examplemodel.objects.all()) how use data when response in jquery function if don't use json in above function how input , response chnage thanks ...
Read more