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

仍然沒有運氣。清除了我的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++; 
    }); 

}; 

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（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另一