Question

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

我只看到2个问题。

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

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

Answer 2

我已经弄明白了这个问题。它与数据切换有关。我没有切换到我的代码中显示和隐藏。

通知下拉列表未显示

2 个答案: