How to do that can click the show content part with jquery?

http://phplist.xxmn.com/menu.html

When the mouse hover on the navigation (cpanel). it shows the corresponding content under it. but i can’t click the link in it. is there a way to get it.i know it will be using setTimeout. but i don’t know how to do. thank you.

when i change the top value small.but under IE7 and IE6.i still can’t click the link in the showing content.

That technique is where a timer called this.timer is assigned to the menu. That is where you assign the setTimeout function.


this.timer = setTimeout(function () {
    ...
}, 100);

The function that you give to setTimeout contains the hide part. The only trouble is that setTimeout forgets what the this value is, so you can deal with that by assigning that=this beforehand, and then using the that variable from within the setTimeout function.


var that = this;
this.timer = setTimeout(function () {

Finally, when you hover you want to use clearTimeout on the this.timer value, which ends up canceling the setTimeout that may have earlier been set.


$("#nav ul li").hover(function() {
    clearTimeout(this.timer);
    ...

Put all that together and you have a good and working solution.

i am sorry, i am a newbie of javascript. i still don’t know how to do… i put the following code in. but it doesn’t work



        var timer;
        $(document).ready(function(){
 $("#nav ul li").hover(function() {
        $(this).find(".sub-menu").show();
        clearTimeout(timer);
    }, function() {

        var timer = setTimeout(function(){
            $(this).find(".sub-menu").hide();
        },300);
    });

     $("#nav li .sub-menu").hover(function(){

         clearTimeout(timer);},
             function(){
         var timer = setTimeout(function(){
            $(this).hide();
        },300);
     });




        });

i am sorry, i am a newbie of javascript. i still don’t know how to do… i put the following code in. but it doesn’t work



        var timer;
        $(document).ready(function(){
 $("#nav ul li").hover(function() {
        $(this).find(".sub-menu").show();
        clearTimeout(timer);
    }, function() {

        var timer = setTimeout(function(){
            $(this).find(".sub-menu").hide();
        },300);
    });

     $("#nav li .sub-menu").hover(function(){
      
         clearTimeout(timer);},
             function(){
         var timer = setTimeout(function(){
            $(this).hide();
        },300);
     });




        });

Here are some notes that might help out:

[color="red"][s]var timer;[/s][/color] // Not needed as it's too global. Better is to place the timer variable as a property on the li element instead
$(document).ready(function(){
    $("#nav ul li").hover(function() {
        $(this).find(".sub-menu").show();
        clearTimeout([color="blue"]timer[/color]); // Needs to refer to this.timer instead of just timer. Also, this maintenance piece of code should be first in the function
    }, function() {
        // you need to add some code here, see below
        ...
        [color="red"][s]var[/s][/color] [color="blue"]timer[/color] = setTimeout(function () { // Remove the var and use this.timer instead
            $([color="red"]this[/color]).find(".sub-menu").hide(); // major problem here.
            // The timeout function has window scope, so the this keyword refers to the window instead
            // You can fix that problem just before you use setTimeout, by assigning the this keyword to a local variable. That then allows the setTimeout function to access the needed scope
            // which is most easily done by using var that = this
        },300);
    });
    ...
});

from your tips. i change the code to the following. but when i mouser out the show content, it isn’t hidden.


$(document).ready(function(){
    $("#nav ul li").hover(function() {
          clearTimeout(this.timer);
        $(this).find(".sub-menu").show();

    }, function() {
        var that = this;
        this.timer = setTimeout(function () {
            $(this).find(".sub-menu").hide();
        },300);
    });
    });




There’s one of the changes that you haven’t yet made, and that relates to the setTimeout function.

SetTimeout executes the function from a global scope, which means that the this keyword refers to the window object. That’s why we assign the this keyword to a variable, which we called that, which means that inside of the setTimeout function we should use that variable instead of this.

i am sorry. i don’t know how to do. thank you

Let’s simplify the explanation then.

Inside of the setTimeout function, the this keyword cannot work properly.
That this variable needs to be removed, and replaced with the that variable instead.

Better is to place the timer variable as a property on the li element instead?

how to define the timer as a property on the li element ?

$(“#nav ul li”).hover(function() {
timer:‘’;

am i right?

it ok. many thanks.

but there are something i can’t understand well.

clearTimeout(timer); // Needs to refer to this.timer instead of just timer. Also, this maintenance piece of code should be first in the function

why using this.timer not timer. and should put it first in the function.

Because stinky ugly horrible (getting the picture?) global variables are a bad thing.

It is far better for variables to restrict their scope. In this case, since the this keyword refers to the li element, and the timer is directly in regard to that li element, setting a property on that li element (with this.timer) allows it to easily be accessed by both functions, while at the same time causing less negative impacts than would global variables.

Yes, you set the property in the second, and make used of it in the first.