jquery - 使用 Dynatree 包装文件夹

Question

我在我的网站上安装了 dynatree 1.2.4，以显示电子邮件存档解决方案中的一系列文件夹。文件夹通过 AJAX 检索，然后在调用 dynatree 代码之前进行格式化

function folders_loaded(json) {
  $("#folder_list").html("<ul id=\"folder_list_ul\"></ul>");
  for (folder in json.allfolders) {
    processFolder(json.allfolders[folder], "folder_list_ul")
  }

  $("#folder_list").dynatree({
      onActivate: function (node) {
          //do stuff here
      },
      onClick: function (node, event) {
          //do stuff here
      }
  });
}
function processFolder(folder, target_id) {
  //console.log(JSON.stringify(folder));
  var fid = folder.folder_id;

  $("#" + target_id).append("<li id=\"folder_id_" + fid + "\"  class=\"folder\" data=\"folder_id: " + fid + "\">" + folder.name);
  $("#folder_id_" + folder.folder_id).append("<ul id=\"folder_list_" + fid + "\"></ul>")
  for(f in folder.folders) {
    processFolder(folder.folders[f],"folder_list_" + fid);
  } 
  $("#" + target_id).append("</li>");  
}

函数processFolder将一个列表项添加到目标无序列表中，然后为子文件夹创建另一个无序列表。然后再次调用 processFolders 来处理子文件夹。

这是json对象的一部分

{
   "allfolders":{
      "Calendar":{
         "folders":{},
         "folder_id":36,
         "name":"Calendar"
      },

      "INBOX":{
         "folders":{
            "Archive Folders":{
               "folders":{
                  "Emails Received 04-09-2008 to 01-09-2010 ":{
                     "folders":{ },
                     "folder_id":42,
                     "name":"Emails Received 04-09-2008 to 01-09-2010 "
                  },
                  "E-mails received 04-2005 to 05-2005":{
                     "folders":{},
                     "folder_id":43,
                     "name":"E-mails received 04-2005 to 05-2005"
                  },
               "folder_id":41,
               "name":"Archive Folders"
            }
         },
         "folder_id":40,
         "name":"INBOX"
      }
  }
}

folder_list div 的 CSS 如下

#folder_list 
{
  position:absolute;
  top:0;
  left:0;
  width:150px;

  height:100%;
  z-index:10;
  white-space:nowrap;
}

文件夹在 Chrome 中呈现精美，但在 IE 中，名称相对较长的文件夹会换行到下一行。

左边的图片显示了我在 IE 中看到的内容，而右边的屏幕截图显示了 Chrome 中的内容。

我还尝试将 white-space:nowrap 添加到folder_list div 中的列表项

#folder_list, #folder_list li
{
  white-space:nowrap;
}

有人在 IE 中看到过这种行为吗？您采取了什么措施来解决这个问题？

Answer 1

增加宽度然后尝试

#folder_list 
{
  width:180px; 
}