jQuery 下拉列表 - CSS 问题答案

【问题标题】：jQuery dropdown - CSS issuesjQuery 下拉列表 - CSS 问题
【发布时间】：2009-03-02 14:38:04
【问题描述】：

嘿，如果你去：http://catonthecouchproductions.com/fish/ 并且下拉菜单下的那些图像应该被隐藏然后出现在悬停时，我到目前为止有这个：

$(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 吗？

【问题讨论】：

标签： jquery css menu

【解决方案1】：

而不是.slideDown()和.slideUp()分别尝试使用：

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

和

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

【讨论】：

【解决方案2】：

你仍然可以使用slideDown、slideUp，真的很有用。我认为您的问题出在 .hover 上，请尝试使用 .mouseover，然后将 mouseout 作为回调。因为现在似乎没有正确调用停止滑块的事件，因为它一次又一次地循环。另外，我不明白应该发生的事情，我认为你混淆了一些元素或其他东西。您可以尝试在应该隐藏或显示的项目上添加一个类，然后使用 .hasClass();当您想检查他们是否有某个班级时，您可以确定是否应该将其向上或向下滑动。

【讨论】：

启动每个项目都假设开始隐藏，但现在我只是将它们保留为显示。在翻转时，我希望它们向下滑动并显示为下拉菜单，然后在推出时让它们恢复到原来的状态。

【解决方案3】：

首先，没有针对单个项目的类。您可以使用 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();
});

【讨论】：

【解决方案4】：

试试这个：

$(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");
    });
});

【讨论】：