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
});

DEMO

---

此处，e.preventDefault() 用于防止页面重新加载以点击 anchor 标记。 jQuery .toggle() 会为你显示隐藏。因此，无需额外检查。

---

相关引用:

• preventDefault()

• fadeToggle()

• slideToggle()