jquery可折叠的默认设置
问题描述:
我试图让一些可扩展的div默认折叠默认情况下,直到设置cookie。jquery可折叠的默认设置
我在代码中看到提示“//开发人员指定了什么?崩溃或展开了?”
看到他们如何默认为扩大我改变了这个:
//what has the developer specified? collapsed or expanded?
if ($($(this)).hasClass("collapsed")) {
$("#" + $(this).attr("id")).next().hide();
$("#" + $(this).attr("id")).children("span").removeClass("collapse").addClass("expand");
}
else {
$("#" + $(this).attr("id")).children("span").removeClass("expand").addClass("collapse");
}
这样:
//what has the developer specified? collapsed or expanded?
if ($($(this)).hasClass("expand")) {
$("#" + $(this).attr("id")).next().hide();
$("#" + $(this).attr("id")).children("span").removeClass("expand").addClass("collapse");
}
else {
$("#" + $(this).attr("id")).children("span").removeClass("collapse").addClass("expand");
}
仍然没有运气。清除了我的cookies并仍然默认打开。
下面是完整的代码:
/**
* Collapsible plugin
*
* Copyright (c) 2010 Ramin Hossaini (www.ramin-hossaini.com)
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
*/
jQuery.collapsible = function(selector, identifier) {
//toggle the div after the header and set a unique-cookie
$(selector).click(function() {
$(this).next().slideToggle('fast', function() {
if ($(this).is(":hidden")) {
$.cookie($(this).prev().attr("id"), 'hide');
$(this).prev().children(".placeholder").removeClass("collapse").addClass("expand");
}
else {
$.cookie($(this).prev().attr("id"), 'show');
$(this).prev().children(".placeholder").removeClass("expand").addClass("collapse");
}
});
return false;
}).next();
//show that the header is clickable
$(selector).hover(function() {
$(this).css("cursor", "pointer");
});
/*
* On document.ready: should the module be shown or hidden?
*/
var idval = 0; //increment used for generating unique ID's
$.each($(selector) , function() {
$($(this)).attr("id", "module_" + identifier + idval); //give each a unique ID
if (!$($(this)).hasClass("collapsed")) {
$("#" + $(this).attr("id")).append("<span class='placeholder collapse'></span>");
}
else if ($($(this)).hasClass("collapsed")) {
//by default, this one should be collapsed
$("#" + $(this).attr("id")).append("<span class='placeholder expand'></span>");
}
//what has the developer specified? collapsed or expanded?
if ($($(this)).hasClass("collapsed")) {
$("#" + $(this).attr("id")).next().hide();
$("#" + $(this).attr("id")).children("span").removeClass("collapse").addClass("expand");
}
else {
$("#" + $(this).attr("id")).children("span").removeClass("expand").addClass("collapse");
}
if ($.cookie($(this).attr("id")) == 'hide') {
$("#" + $(this).attr("id")).next().hide();
$("#" + $(this).attr("id")).children("span").removeClass("collapse").addClass("expand");
}
else if ($.cookie($(this).attr("id")) == 'show') {
$("#" + $(this).attr("id")).next().show();
$("#" + $(this).attr("id")).children(".placeholder").removeClass("expand").addClass("collapse");
}
idval++;
});
};
答
我猜它是关于jQuery Mobile的。 这是我的解决方案。
HTML:
<div data-role="page" id="myPage"><div data-role="content" id="myContent">
<div data-role="collapsible" id="myCollapsible" data-collapsed="false">
<h3>Collapsible 1</h3>
<p>Collapsible content 1</p>
</div>
</div></div>
的jQuery(asumming你已经加载jquery cookie plugin):
$('#myPage').live('pageshow',function(event){
//on collapsible click
$('#myCollapsible').click(function(event){
//make cookie value collapsible "on"
$.cookie('collapsible', 'on');
});
//verify if cookie exists
if ($.cookie('collapsible') === 'on') {
//if cookie exists expand the collapsible
$('#myCollapsible').trigger('expand');
}
else
{
//if cookie doesn't exist, collapse the block
$('#myCollapsible').trigger('collapse');
}
});
希望它能帮助,单程或代码HTTP另一
全部信息://博客.ramin-hossaini.com/2010/4月27日/ jQuery的可折叠插件/ – rd42 2012-02-01 14:04:20