jquery可折叠默认设置

Question

我正在尝试让一些可扩展 div 的默认值在设置 cookie 之前默认折叠。

我在代码中看到了一个提示“//开发人员指定了什么？折叠或展开？”

看到他们默认如何展开，我改变了这个：

    //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");
    }

仍然没有运气。清除了我的 cookie，它们仍然默认打开。

这是完整的代码：

/**
 * 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++;
    });

};

Answer 1

我猜它是关于 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（假设你已经加载了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');
    }
});

希望它有所帮助，不管怎样