不显示自顶向下菜单

Question

我在这个实现中使用bootstrap。所以我遵循了从引导文档中创建自顶向下菜单的指导方针。这个自上而下的菜单应该包含一个房间列表。菜单被称为"房间"。我的Jade和Javascript文件如下(只是自上而下菜单的实现)

editor.jade

extends layout
block header
script(src='/javascripts/editor.js')
block content
h1(id="title") Editor
h2 Editor: #{editorName}
.dropdown
 button#dropdownMenu1.btn.dropdown-toggle.sr-only(type='button', data-toggle='dropdown')
  | Rooms
  span.caret
 ul.dropdown-menu(role='menu', aria-labelledby='dropdownMenu1')
  #rooms
...

会(javascript)

...
$.getJSON("/getContents", {theRoom: "roomList"},  function(room) {
   room.activeRooms.forEach(function(theExit){
       $('#rooms').replaceWith('<li  id="rooms" role="presentation">' + theExit+'</li>')
   });
});
...

遗憾的是，屏幕上没有显示自上而下的菜单。你能看看我的代码，告诉我我做错了什么吗?

如果我的问题不清楚，你可以告诉我，以便我详细说明吗?

Answer 1

确保http请求被填充并且回调被调用。然后，将jquery部分替换为如下内容:

rooms.forEach(function(room){
    $('.dropdown-menu').append('<li role="presentation">' +room+' trolol</li>')
});

你现在做的是用forEach的第一次迭代替换#rooms元素，然后它就不存在了，jquery找不到它。

http://jsfiddle.net/t6N9R/3/

(我使用一个在线转换器将jade转换为HTML)