0

我在我的 Wordpress 网站上使用这个插件：http : //wordpress.org/plugins/wordpress-sliding-drawer-content-area/，它在侧面为我的小部件创建了一个抽屉。它在我的本地服务器上运行良好。

不幸的是，我必须将每个 Wordpress 页面转换为 HTML 页面，以便在客户的 Intranet 服务器上使用。那时抽屉拒绝在页面加载时保持关闭状态，这与以前不同。

这是js：

jQuery(document).ready(function() {
   if(jQuery('#sod-drawer-plugin.left').length >0){
            var $handle = jQuery('#sod-drawer-plugin.left #sod-drawer-handle');
            var $plugin = jQuery('#sod-drawer-plugin.left');
            var $adjustment = (parseInt($handle.outerWidth())/2)-parseInt($handle.outerHeight())/2;
            if (jQuery.browser.msie){
                $plugin.css({
                        left:parseInt($plugin.css('left'),10) == 0 ? -$plugin.outerWidth():0
                });
                $handle.css({
                        left:parseInt($plugin.css('left'),10) == 0 ? parseInt($plugin.outerWidth()-$adjustment):$plugin.outerWidth()
                });
                $handle.click(function(){
                    $plugin.animate({
                        left:parseInt($plugin.css('left'),10) == 0 ? -$plugin.outerWidth():0
                    });
                    $handle.animate({
                        left:parseInt($plugin.css('left'),10) == 0 ? parseInt($plugin.outerWidth()-$adjustment):$plugin.outerWidth()
                    });
                });
            }else{
                $plugin.css({
                        left:parseInt($plugin.css('left'),10) == 0 ? -$plugin.outerWidth():0
                });
                $handle.css({
                        left:parseInt($plugin.css('left'),10) == 0 ? parseInt($plugin.outerWidth()-$adjustment):$plugin.outerWidth()-$adjustment
                });
                $handle.click(function(){
                    $plugin.animate({
                        left:parseInt($plugin.css('left'),10) == 0 ? -$plugin.outerWidth():0
                    });
                    $handle.animate({
                        left:parseInt($plugin.css('left'),10) == 0 ? parseInt($plugin.outerWidth()-$adjustment):$plugin.outerWidth()-$adjustment
                    });
                });
            }
   }
 });

和 HTML：

    <!DOCTYPE html>
<!-- saved from url=(0088)./work-life-balance/enhance-your-professional-standing/ -->
<html lang="en-US"><!--<![endif]--><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <title>Enhance Your Professional Standing | Staff Benefits and Work-life Initiatives</title>

<link rel="stylesheet" id="sod_drawer_css-css" href="./style(1).css" type="text/css" media="all">
<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript" src="./sod_drawer.js"></script>
<link rel="stylesheet" type="text/css" href="./saved_resource.css">
<link rel="stylesheet" type="text/css" media="all" href="./style.css">

</head>
<body class="page page-id-167 page-child parent-pageid-4 page-template-default">

    <div class="sod-drawer left" id="sod-drawer-plugin" style="left: -280px;"> <!--- This value changes to left:0px when loaded on the browser --->
        <div id="sod-drawer-handle" class="pull black rotate" style="left: 240px;">
            <div class="tag"><p>Contents</p></div>
        </div>
        <div class="content">
            <div class="sod-drawer-inner">
                <div class="full" id="sod-drawer-1">
                    <div id="execphp-2" class="sod-drawer-widget widget_execphp">           
                        <div class="execphpwidget">
                            <div id="sidebar">
                                <h1><a href="./" title="Staff Benefits and Work-life Initiatives" rel="home">Staff Benefits and Work-life Initiatives</a></h1>
                                <div id="access" role="navigation" class="desc">
                                    <div class="menu-main-menu-container">
                                        <ul id="menu-main-menu" class="menu">
                                            <li id="menu-item-33" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-33"><a href="./">Introduction</a>
                                            </li>
                                            <li id="menu-item-626" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-626"><a href="./epilogue/">Epilogue</a></li>
                                        </ul>
                                    </div>
                                </div><!-- #access -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>
</html>

我不精通Javascript，所以非常感谢您的解释:)

4

1 回答 1

0

jQuery 脚本库是否正确加载？我对文档头部脚本的 src URL 表示怀疑：

<script type="text/javascript" src="./jquery.js"></script>

这些 URL 可能是问题所在。它可能在您的本地服务器上正常工作，但不能在实时 URL 上工作。您可能需要将其更改为“/jquery.js”，因为“.” 指当前目录。开头的“/”指的是根 URL。

<script type="text/javascript" src="/jquery.js"></script>

请试一试，让我知道结果。

于 2013-06-14T17:16:21.463 回答