jQuery的slideDown和slideUp答案

【问题标题】：Jquery slideDown and slideUpjQuery的slideDown和slideUp
【发布时间】：2011-09-01 02:24:00
【问题描述】：

为什么这不起作用？？

    $("#panellink").click(
    function () {
        $(this).addClass("hover"),
    $("#playerpanel").slideDown(250);
    },
    function () {
        $(this).removeClass("hover"),
    $("#playerpanel").slideUp(250);
    }
);

我想要的只是当他们点击链接时#playerpanel 会向下滑动，再次点击时它会向上滑动？？？

当我点击链接时它会像预期的那样向下滑动，当我再次点击链接时它不会向上滑动而是停留在那里。

【问题讨论】：

我编辑了问题:)

标签： jquery

【解决方案1】：

试试这个：

$("#panellink").click(function() {
    $(this).toggleClass( "hover" );
    $(this).slideToggle( 250 );
});

【讨论】：

【解决方案2】：

您想使用toggle 而不是click。

http://api.jquery.com/toggle-event/

.toggle() 方法为点击事件绑定了一个处理程序，所以规则此处也列出了触发点击应用的概述。

$("#panellink").toggle(
    function () {
        $(this).addClass("hover");
        $("#playerpanel").slideDown(250);
    },
    function () {
        $(this).removeClass("hover");
        $("#playerpanel").slideUp(250);
    }
);

另外，在添加/删除类调用之后有逗号...应该是分号。

我认为这将有助于您想要做的交替功能。

希望这会有所帮助！

【讨论】：

【解决方案3】：

假设您的 HTML 代码是正确的，并且您已经定义了您在 JQuery 中使用的元素（即一个 id="panellink" 的元素和一个 id="panelplayer" 的元素）。

我正在查看 JQuery API (http://api.jquery.com/click/) 的 .click() 事件，它似乎不接受一对函数作为处理程序。

您可以做一些检查，然后根据结果采取行动。您可以检查元素是否具有hover 类，然后处理每种情况。

$("#panellink").click( function() {
    if( $(this).hasClass("hover") ) {
        $(this).removeClass("hover");
        $("#playerpanel").slideUp(250);
    } else {
        $(this).addClass("hover");
        $("#playerpanel").slideDown(250);
    }
)

注意：另外，我刚刚注意到我认为是错别字。 addClass 和 removeClass 语句都应该以分号 ; 结尾，而不是逗号 ,。

希望对你有帮助

【讨论】：