jQuery的下拉菜单 - CSS问题

嘿，如果你去：http://catonthecouchproductions.com/fish/，并且下拉下这些图像是假设被隐藏，然后出现在盘旋，我有这个至今：jQuery的下拉菜单 - CSS问题

$(document).ready(function() { 
    $('.btn-fishing-trip').hover(function() { 
     $('.fishing-trip').slideDown("slow"); 
    }, function() { 
     $('.fishing-trip').slideUp("slow"); 
    }); 
    $('.btn-combo').hover(function() { 
     $('.combo').slideDown("slow"); 
    }, function() { 
     $('.combo').slideUp("slow"); 
    }); 
});

但它行为怪异。关于我能做什么的任何建议？我想，因为一旦上升其他幻灯片取代它的位置。我应该使用animate（）而不是slideDown？

来源

2009-03-02 Coughlin

代替.slideDown()和.slideUp()尝试分别用：

$(yourElementHere).stop().animate({ top: "20px", opacity: "1" }, 500, "swing");

and

$(yourElementHere).stop().animate({ top: "-180px", opacity: "0" }, 500, "swing");

来源

2009-03-05 11:54:35 tanathos

试试这个：

$(document).ready(function() { 
    $('.btn-fishing-trip').hover(function() { 
     $('.fishing-trip').slideDown("slow"); 
     $('.combo').slideUp("slow"); 
    });  
    $('.btn-combo').hover(function() { 
     $('.combo').slideDown("slow"); 
     $('.fishing-trip').slideUp("slow"); 
    }); 
});

来源

2009-03-02 14:44:15 Bigballs

你仍然可以使用了slideDown，效果基本show，这是非常有用的。我认为你的问题是.hover，使用.mouseover尝试，然后用鼠标作为回调。因为现在看起来事件停止滑块没有正确调用，因为它一次又一次地循环。另外，我没有想到会发生什么情况，我认为你混淆了一些元素或其他东西。你也可以尝试在应该隐藏或显示的项目上添加一个类，然后使用.hasClass（）;当你想要检查他们是否有某个班级时，这样你就可以确定你是否应该向上或向下滑动它。

来源

2009-03-02 14:44:50

要开始每个项目都假设开始隐藏，但现在我刚刚离开他们，因为正在显示。翻转时，我希望它们滑下并显示为下拉菜单，然后在展开时将它们恢复到其原始状态。 – Coughlin 2009-03-02 20:40:54

首先，没有针对单个项目的课程。您可以使用ID单独设置它们的样式，并且对于具有相同类的所有对象只有一个悬停功能（而不是复制和粘贴四次）。

第二关，这里的基本结构，你应该有：

<div class="button" id="btn1"> 
    <div class="info"><img src="info1"></img></div> 
</div> 
<div class="button" id="btn2"> 
    <div class="info"><img src="info2"></img></div> 
</div> 
...

您不需要有“.INFO”的元素作为按钮的孩子，但他们需要访问没有唯一id（即下一个元素或孩子）。

这使得JavaScript的简单：

$(".button").hover(function() { 
    $(this).find(".info").slideDown(); 
}, function() { 
    $(this).find(".info").slideUp(); 
});

或者，你可以修改它，像这样以使其更好地工作：

$(".button").hover(function() { 
    $(".info").not(".info", $(this)).slideUp(); // Not sure if valid JQ 
    $(this).find(".info").slideDown(); 
});

来源

2009-03-03 03:44:26 qpingu

jQuery的下拉菜单 - CSS问题

回答

相关问题