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()用于阻止页面重新加载以点击锚标记。 jQuery .toggle() 会为您显示隐藏。因此，无需额外检查。

相关参考：

Answer 2

您的代码无法正常工作的原因是您的处理程序未取消默认事件，因此浏览器正在关注该链接。试试这个：

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

jQuery slideDown / slideUp问题

2 个答案: