Question

我没有制作这个javascript，但我正在尝试编辑它以包含整个侧边栏的切换状态的cookie，而不仅仅是侧边栏内的div任何帮助？我很害怕JS，这对我来说都是胡言乱语。

    vB_XHTML_Ready.subscribe(init_sidebar);
function init_sidebar() {
    new vBSidebar()
}
function vBSidebar() {
    this.init()
}
vBSidebar.prototype.init = function() {
    this.sidebar_button = YAHOO.util.Dom.get("sidebar_button");
    this.sidebar_container = YAHOO.util.Dom.get("sidebar_container");
    this.sidebar = YAHOO.util.Dom.get("sidebar");
    this.content_container = YAHOO.util.Dom.get("content_container");
    this.content = YAHOO.util.Dom.get("content");
    YAHOO.util.Event.on(this.sidebar_button, "click", this.toggle_collapse, this, true)
};
vBSidebar.prototype.toggle_collapse = function(A) {
    YAHOO.util.Event.stopEvent(A);
    if (YAHOO.util.Dom.getStyle(this.sidebar, "display") == "none") {
        this.expand()
    } else {
        this.collapse(true)
    }
    return false
};
vBSidebar.prototype.collapse = function(A) {
    var B = this.sidebar_button;
    if (A) {
        var C = new YAHOO.util.Anim(this.sidebar, {
            opacity: {
                from: 1,
                to: 0
            }
        }, 0.3);
        C.onComplete.subscribe(function(G, D, E) {
            YAHOO.util.Dom.setStyle(E.sidebar, "display", "none");
            YAHOO.util.Dom.setStyle(E.sidebar_container, "width", "0");
            var F;
            if (sidebar_align == "right") {
                F = new YAHOO.util.Anim(E.content_container, {
                    marginRight: {
                        to: 0
                    }
                }, 0.3);
                F.animate();
                F = new YAHOO.util.Anim(E.content, {
                    marginRight: {
                        to: 0
                    }
                }, 0.3);
                F.onComplete.subscribe(function() {
                    YAHOO.util.Dom.setAttribute(B, "src", IMGDIR_MISC + "/tab-expanded.png")
                });
                F.animate()
            } else {
                F = new YAHOO.util.Anim(E.content_container, {
                    marginLeft: {
                        to: 0
                    }
                }, 0.3);
                F.animate();
                F = new YAHOO.util.Anim(E.content, {
                    marginLeft: {
                        to: 0
                    }
                }, 0.3);
                F.onComplete.subscribe(function() {
                    YAHOO.util.Dom.setAttribute(B, "src", IMGDIR_MISC + "/tab-expanded-left.png")
                });
                F.animate()
            }
        }, this);
        C.animate()
    } else {
        YAHOO.util.Dom.setStyle(this.sidebar, "display", "none");
        YAHOO.util.Dom.setStyle(this.sidebar_container, "width", "0");
        if (sidebar_align == "right") {
            YAHOO.util.Dom.setAttribute(B, "src", IMGDIR_MISC + "/tab-expanded.png");
            YAHOO.util.Dom.setStyle(this.content_container, "marginRight", "0");
            YAHOO.util.Dom.setStyle(this.content, "marginRight", "0")
        } else {
            YAHOO.util.Dom.setAttribute(B, "src", IMGDIR_MISC + "/tab-expanded-left.png");
            YAHOO.util.Dom.setStyle(this.content_container, "marginLeft", "0");
            YAHOO.util.Dom.setStyle(this.content, "marginLeft", "0")
        }
    }
    this.save_collapsed("1")
};
vBSidebar.prototype.expand = function() {
    var B;
    var A = this.sidebar_button;
    if (sidebar_align == "right") {
        B = new YAHOO.util.Anim(this.content_container, {
            marginRight: {
                to: (0 - content_container_margin)
            }
        }, 0.3);
        B.animate();
        B = new YAHOO.util.Anim(this.content, {
            marginRight: {
                to: content_container_margin
            }
        }, 0.3);
        B.onComplete.subscribe(function(F, C, D) {
            YAHOO.util.Dom.setStyle(D.sidebar, "display", "block");
            YAHOO.util.Dom.setStyle(D.sidebar_container, "width", sidebar_width + "px");
            var E = new YAHOO.util.Anim(D.sidebar, {
                opacity: {
                    from: 0,
                    to: 1
                }
            }, 0.3);
            E.onComplete.subscribe(function() {
                YAHOO.util.Dom.setAttribute(A, "src", IMGDIR_MISC + "/tab-collapsed.png")
            });
            E.animate()
        }, this);
        B.animate()
    } else {
        B = new YAHOO.util.Anim(this.content_container, {
            marginLeft: {
                to: (0 - content_container_margin)
            }
        }, 0.3);
        B.animate();
        B = new YAHOO.util.Anim(this.content, {
            marginLeft: {
                to: content_container_margin
            }
        }, 0.3);
        B.onComplete.subscribe(function(F, C, D) {
            YAHOO.util.Dom.setStyle(D.sidebar, "display", "block");
            YAHOO.util.Dom.setStyle(D.sidebar_container, "width", sidebar_width + "px");
            var E = new YAHOO.util.Anim(D.sidebar, {
                opacity: {
                    from: 0,
                    to: 1
                }
            }, 0.3);
            E.onComplete.subscribe(function() {
                YAHOO.util.Dom.setAttribute(A, "src", IMGDIR_MISC + "/tab-collapsed-left.png")
            });
            E.animate()
        }, this);
        B.animate()
    }
    this.save_collapsed("0")
};
vBSidebar.prototype.save_collapsed = function(A) {
    expires = new Date();
    expires.setTime(expires.getTime() + (1000 * 86400 * 365));
    set_cookie("vbulletin_sidebar_collapse", A, expires)
};

在最后我看到了设置cookie ...但它不对，那个cookie设置了

的状态

<div class="block smaller">

我想让它设置

的状态

<ul id="sidebar">

整个身体看起来像：

<body>
<div class="body_wrapper">


    <div id="content_container" class=" ">
        <div id="content" >

    <!-- main -->

    <ol id="forums" class="floatcontainer">
        <li class="forumbit_nopost old L1" id="cat1">
    <div class="forumhead foruminfo L1 collapse">
        <h2>
            <center>Content Content Content </center>
        </h2>
    </div>
</li>
    </ol>

    <!-- /main -->
        </div>
    </div>

    <div id="sidebar_container" class="">

<div class="clear"></div>

        <a id="sidebar_button_link" href="#">

            <img id="sidebar_button" src="images/misc/tab-collapsed.png" alt="" />

        </a>
        <ul id="sidebar"  >
            <li>
    <div class="block smaller">
        <div class="blocksubhead">
            <a class="collapse" id="collapse_block_html_3" href="#top"><img alt="" src="images/misc/collapse_40b.png" id="collapseimg_html_3"/></a>
            <span class="blocktitle">Sidebar</span>
        </div>
        <div class="widget_content blockbody floatcontainer">
        <div id="block_html_3" class="blockrow">
            Sidebar Sidebar Sidebar
        </div>
        </div>
    </div>
    <div class="underblock"></div>
</li>
        </ul>
    </div>


<div style="clear:both;"></div>


<div id="footer" class="floatcontainer footer">

FOOTER

</div>
</div> 

</body>

抱歉没有制作JSFiddle，但它不能在JSFiddle中运行，你可以看到我在http://dirtrif.com/index.php?styleid=9

所拥有的实例。

Answer 1

我明白你要在这里实现的目标。一个很好的快速解决方案，使用本地存储也会快得多。

所有你需要做的就是当侧边栏被隐藏时，本地存储项目被设置为1，然后当它被显示时，它被设置为0。

在页面加载时，您可以运行一个快速简单的if语句来检查本地存储项的值，然后根据其值来显示。

我希望这有帮助！

为侧边栏切换显示设置cookie

1 个答案: