Question

有没有人知道代码尽可能简单地显示/隐藏HTML。

使用：

- 存储cookies选项

- 显示/隐藏

的影响

Answer 1

jquery cookie plugin可以简化Cookie管理。就显示/隐藏HTML而言，您可以查看show()和hide()方法。

Answer 2

这实际上取决于内容需要显示/隐藏的事件/原因......

是否必须为特定用户显示特定于用户的内容，如果是，您如何识别用户（sessions，openID）？或者它是事件驱动的，即用户点击按钮和内容显示/隐藏，cookie存储显示/隐藏状态？

达莫

Answer 3

可能比您需要的更多，但我使用tablesorter插件来折叠/展开表的各个部分，将状态存储在cookie中，使用.toggle（）可以获得很好的效果。

function tableContainer(id,visible,sortColumn,sortOrder){
  this.ID = id;
  this.Visible = visible;
  this.SortColumn = sortColumn;
  this.SortOrder = sortOrder;
}

function bindTableHeaders(element){
  //Bind click handler to the table THs to update object as to current sort column.
  $("thead th","#" + element).bind("click",function(){
    var order = this.order
    var column = this.column
    var $table = $(this).closest("table")
    var visible = $table.attr("expanded") //Technically I suppose if you can click these then it must be visible
    var id = $table.attr("id")

    var tableObj = new tableContainer(id,visible,column,order);

    $.cookie(element, JSON.stringify(tableObj), { secure: true }); //Write the current state into the section cookie   
  });
};

function recoverState(element) {
  // pull cookie for page state and visibility
  var elementData = $.cookie(element);

  if (elementData != null){
    // parse JSON based on object representation
    var json = JSON.parse(elementData)
    var id = json.ID;
    var visible = json.Visible;
    var sortColumn = json.SortColumn == undefined ? 0 : json.SortColumn
    var sortOrder = json.SortOrder == undefined ? 0 : json.SortOrder
  } else {
    var id = element;
    var visible = "true"
    var sortColumn = 0;
    var sortOrder = 0;
  }

  // switch visibility
  if(visible == "false"){
    toggleElement(element)
  }

  // Determine if this section has any data (eg. a <tbody>)
  if ($("tbody","#" + id).length == 0 || $("tbody","#" + id).html() == "") 
    return

  if (pageAction == "Edit"){
      $("#" + id).tablesorter({widgets: ['zebra'], sortList: [[sortColumn,sortOrder]]});      
  } else {
      $("#" + id)
      .collapsible("td.collapsible",{
                    collapse:true
                   })
      .tablesorter({widgets: ['zebra'], sortMultiSortKey:'false', sortList: [[sortColumn,sortOrder]]}); 
  }  
}

function toggleElement(element) {
 if ($("#" + element).attr("expanded") == "true"){
  $("#" + element).attr("expanded","false")
  $("#" + element).hide(); 
  var isVisible = "false"
 } else {
  $("#" + element).attr("expanded","true")
  $("#" + element).show();
  var isVisible = "true"
 } 

 //Rewrite the cookie for this section changing only the visibility
 var elementData = $.cookie(element);
 var visible = isVisible;
 if (elementData != null){
   var json = JSON.parse(elementData)
   var id = json.ID;
   var sortColumn = json.SortColumn;
   var sortOrder = json.SortOrder;
 } else {
   var id = element
   var sortColumn = 0;
   var sortOrder = 0;
 }

 var tableObj = new tableContainer(id,visible,sortColumn,sortOrder);
 $.cookie(element, JSON.stringify(tableObj), { secure: true }); //Write the current state into the section cookie   
}

使用cookie显示/隐藏的简单代码

3 个答案: