Борьба с slideToggle на вложенных списках

Question

сначала, если честно, я новичок, когда дело доходит до JQuery. Я смотрел тонну учебников и читал на самом сайте jquery. В то время как я начинаю понимать это, концепция пока не «нажала» для меня.

В настоящее время я работаю над отображением продукта, где я хочу, чтобы ящик сдвигался вниз, когда наводил курсор на изображение продукта. В этом поле содержится список моделей.

Я получил страница создана здесь:

http://www.tailwatersflyfishing.com/sage-fly-rods

Это эффект, который я пытаюсь дублировать (один из наших поставщиков стержневых)

http://www.sageflyfish.com/rods-landing.html

I «Я попытался написать код, но не смог заставить его работать. Это то, что я в настоящее время на странице:

$('document').ready(function() { 
    $('.rod-tall').children('.rod-inner').children('.rod-list').hide(); 
    $('.rod-list ul div li ul li a').click(function() { 
     window.location = $(this).attr('href'); 
    }); 

    $(".rod-tall .rod-inner").mouseenter(function() { 
    $(this).children('.rodlist').children('.desc-box').slideToggle('fast'); 
    }); 

    $(".rod-tall .rod-inner").mouseleave(function() { 
    $(this).children('.rodlist').children('.desc-box').slideToggle('fast'); 
    }); 
}); 

---- UPDATE ----

теперь у меня это включено в моей странице:

<script type="text/javascript"> 
    $(document).ready(function() { 
    $('.rod-list').hide(); 
    $('.rod-tall').hover(function() { 
    $('.rod-list',this).slideToggle('fast'); 
    },function() { 
    $('.rod-list',this).slideToggle('fast'); 
    });​ 
</script> 

Все ошибки прототипа прошло. НО я получаю эту ошибку (Uncaught SyntaxError: Неожиданный токен ILLEGAL), который, я надеюсь, является причиной того, что этот скрипт не работает. Есть ли недопустимый символ или невидимый символ, который вызывает эту ошибку?

Спасибо!

Answer 1

Как об этом (jsFiddle example):

JQuery:

$('.rod-list').hide(); 
$('.rod-tall').hover(function() { 
    $('.rod-list',this).slideToggle('fast'); 
},function() { 
    $('.rod-list',this).slideToggle('fast'); 
}); 

CSS:

.rod-list { 
    position:absolute; 
} 

Answer 2

Существует ошибка на странице:

window.location = $(this).attr('href';) 

с запятой находится внутри скобок.

Answer 3

Является ли это то, что вы пытаетесь сделать:

$(document).ready(function() { 
    $('.rod-list').hide(); 

    $('.rod-tall').on({ 
     mouseenter: function() { 
      $('.rod-list', this).slideDown('fast'); 
     }, 
     mouseleave: function() { 
      $('.rod-list', this).slideUp('fast');  
     } 
    }); 
});​ 

FIDDLE