javascript - 通知下拉列表未显示

Question

以下是我的代码，用于在单击图标时显示通知列表。但是通知列表的下拉列表没有显示。至于 CSS，只添加了 bootstrap。以下附件是我的 HTML 和 JavaScript 以及 mock 方法。

function getMessageNotificationsDetails() {
  $("#messageNotificationsDetails").html("");
  $("#messageNotificationsDetails").append("<li><p class='red'>You have 5 new messages</p></li>");
  $("#messageNotificationsDetails").append("<li><p class='red'>You have 6 new messages</p></li>");

}

function getNotificationsDetails() {
  $("#notificationsDetails").html("");
  $("#notificationsDetails").append("<li><p class='red'>You have 5 new messages</p></li>");
  $("#notificationsDetails").append("<li><p class='red'>You have 56 new messages</p></li>");

}

<div class="col-md-1 text-center text-md-right">
  <div class="row">
    <div class="col-md-6">
      <div class="notification">
        <i style="cursor: pointer;" onclick="getMessageNotificationsDetails()" class="fa fa-envelope-o">
                                                </i>
        <span id="messageCount" class="badge"></span>
        <ul id="messageNotificationsDetails" class="notification-menu">
        </ul>
      </div>
    </div>
    <div class="col-md-6">
      <div class="notification">
        <i style="cursor: pointer;" onclick="getNotificationsDetails()" class="fa fa-bell-o">
                                                </i>
        <span id="notificationsCount" class="badge"></span>
        <ul id="notificationsDetails" class="notification-menu">

        </ul>
      </div>
    </div>
  </div>
</div>

Answer 1

我只看到 2 个问题。

1. unreadMessageCount 未定义
2. 每次使用 .html() 都会覆盖元素的 html 内容。它适用于您的情况，因为最后一次通话中包含内容。

此外，定义脚本的位置和时间将影响它是否可用于标记。在您的情况下，需要在标记之前定义它。您可以通过 JS 附加监听器，然后它可以在呈现标记后运行。