Борьба с slideToggle на вложенных списках - PullRequest
Новая
       9

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

0 голосов
/ 10 марта 2012

во-первых, если честно, я нуб, когда дело доходит до Jquery. Я смотрел кучу учебников и читал на самом сайте jquery. Пока я начинаю понимать это, концепция еще не «зацепилась» за меня.

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

У меня есть страница, настроенная здесь:

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

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

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

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

$('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 ), которая, я надеюсь, является причиной того, что этот скрипт не работает. Есть ли недопустимый символ или невидимый символ, который вызывает эту ошибку?

Спасибо!

Ответы [ 3 ]

0 голосов
/ 10 марта 2012

Как насчет этого ( Пример jsFiddle ):

JQuery 

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

CSS 

.rod-list {
    position:absolute;
}
0 голосов
/ 10 марта 2012

Это то, что вы пытаетесь сделать: 

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

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

FIDDLE

0 голосов
/ 10 марта 2012

На странице есть ошибка: 

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

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

...