jquery - jQuery slideDown/slideUp 问题

Question

我无法让 jQuery slideDown 效果起作用。我正在尝试通过向下滑动来显示面板。相反，它只是像 show() 方法一样显示，但在 Firefox 中它甚至不显示。

jQuery：

$("#linkHBE").click(function(){
    if ($(".panel").is(":hidden")) {
        $(".panel").show("slow");
    } 
    else 
        $(".panel").hide("slow");
});

的HTML：

 <div class="panel"></div>

 <ul id="grid">
      <li class="web"><a id="linkHBE"><img  width="296px" height="196px"></a></li>
      <li class="graphic"><img width="296px" height="196px"></li>
      <li class="web"><img width="296px" height="196px"></li>
 </ul>   

Answer 1

$("#linkHBE").click(function(e) {
    e.preventDefault();
    $('.panel').toggle(1000); // fadeToggle() or slideToggle() are also available
});

演示

---

在这里，e.preventDefault()是为了防止页面重新加载以单击锚标记。jQuery.toggle()会为你做显示隐藏。因此，无需额外检查。

---

相关参考：

• 防止默认（）

• 淡入淡出切换（）

• 滑动切换（）

Answer 2

您的代码不起作用的原因是您的处理程序没有取消默认事件，因此浏览器正在跟踪链接。尝试这个：

$("#linkHBE").click(function(e){
    $(".panel").slideToggle("slow");
    e.preventDefault();
});