Question

编辑： 更新了代码

你会看到这张图片：

Expand and Collapse sections

我无法让这段代码正常工作......

global $context, $options;
echo '
<script type="text/javascript"><!-- // --><![CDATA[
var oTd;
function collapse_expand(which)
{
    var type = which.substr(2);
    var type_lower = type.toLowerCase();
    switch (type)
    {
        case "Left":
            oTd = $(".tablecol_0").eq(3);
            break;
        case "Right":
            oTd = $(".tablecol_2").eq(0);
            break;
        case "Top":
            oTd = $(".tablecol_0").eq(1);
            break;
        default:
            oTd = NULL;
            break;
    }

    if (!oTd)
        return;

    oTd.slideToggle("slow", "linear", function(){
        var oNum = !$(this).is(":visible") ? 1 : 0;
        var colExp = oNum == 1 ? "Expand" : "Collapse";
        $("#" + type_lower + "side").text(colExp + " " + type);';
        if ($context['user']['is_guest'])
            echo '
                document.cookie = which + "Collapse=" + oNum;';
        else
            echo '
                smf_setThemeOption(which + "Collapse", oNum, null, "' . $context['session_id'] . '");';
        echo '
    });
}';

$show = array(
    'left' => $context['user']['is_guest'] ? empty($_COOKIE["dpLeftCollapse"]) : empty($options["dpLeftCollapse"]),
    'right' => $context['user']['is_guest'] ? empty($_COOKIE["dpRightCollapse"]) : empty($options["dpRightCollapse"]),
    'top' => $context['user']['is_guest'] ? empty($_COOKIE["dpTopCollapse"]) : empty($options["dpTopCollapse"])
);

if (!$show['left'] || !$show['right'] || !$show['top'])
{
    echo '
    function SBVars()
    {
        $(document).ready(function(){';

            if (!$show['left'])
            echo '
                $(".tablecol_0").eq(3).hide();
                $("#leftside").text("Expand Left");';
            if (!$show['right'])
            echo '
                $(".tablecol_2").eq(0).hide();
                $("#rightside").text("Expand Right");';
            if (!$show['top'])
            echo '
                $(".tablecol_0").eq(1).hide();
                $("#topside").text("Expand Top");';
        echo '
        });
    }

    if (!document.addEventListener("DOMContentLoaded", SBVars, false))
        addLoadEvent(SBVars);';
}
echo '

// ]]></script> 

<div style="width: 100%;"><div id="rightside" class="button_submit" style="float: right;" onclick="javascript:collapse_expand(\'dpRight\');">Collapse Right</div><div id="leftside" class="button_submit" style="float: left;" onclick="javascript:collapse_expand(\'dpLeft\');">Collapse Left</div><div id="topside" class="button_submit" style="text-align: center; width: 100px; margin: 0 auto;" onclick="javascript:collapse_expand(\'dpTop\');">Collapse Top</div><div style="clear: both;"></div></div>';

它是用PHP编写的，但是jQuery代码应该可以工作，我只是无法理解为什么？没有我可以看到的控制台错误。我只是希望它以动画效果扩展/折叠部分......这可能吗？当然，如果页面被刷新，我正在使用cookie来设置它以保持折叠状态。

你认为我必须在slideToggle函数中使用某种步骤才能获得流畅的动画吗？如果是这样，怎么样？请在这里真的需要一些帮助。

jQuery折叠/扩展部分

0 个答案: