Question

首先，说实话，在谈到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>

所有原型错误都消失了。但我收到此错误（未捕获的SyntaxError：意外的令牌ILLEGAL ），我希望这是该脚本无法正常工作的原因。是否存在导致此错误的无效字符或不可见字符？

谢谢！

Answer 1

页面上有错误：

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

分号位于parens内部。

Answer 2

这个怎么样（ 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 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

在嵌套列表上使用slideToggle挣扎

3 个答案: