【发布时间】：2014-04-15 05:07:46
【问题描述】：
我没有制作这个 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 看到我所拥有的一个活生生的例子
【问题讨论】：
-
为什么要使用 cookie？只需使用节点或主干 js。
-
@StuartWickenden 是否会记住每次加载页面时侧边栏是否折叠？
-
Backbone 专门设计用于记住其状态。它无需刷新页面即可工作，最适合与
AJAX一起用于动态内容填充。它非常适合您在链接中说明的类型。
标签： javascript jquery html css cookies