Question

我一直在研究浏览器用户消息的各种方法。例如stackoverflow和airbnb。我用萤火虫看了一眼airbnb的方法，并对这么多嵌套的div等荒谬复杂感到震惊。等等噩梦。某种反应实施。

相比之下，stackoverflow有一个更优雅的方法。我想为我的网站做类似的事情。但我在下面有一些问题。

我看到邮件是标题导航菜单的一部分。似乎有关的第一个div是

<div class="-dialog-container js-topbar-dialog-corral">

然后出现的其他div似乎是收件箱图标右侧的其他图标，但它们以奇怪的顺序出现：

 <div class="topbar-dialog siteSwitcher-dialog dno"
      style="top: 57px; right: 15px; display: block;">

这是针对社区菜单。

<div class="topbar-dialog inbox-dialog dno"
     style="top: 57px; right: 129px; display: none;">

这是收件箱

<div class="topbar-dialog help-dialog js-help-dialog dno"
     style="top: 57px; right: 53px; display: none;">

这是帮助

<div class="topbar-dialog achievements-dialog dno"
     style="top: 57px; right: 91px; display: none;">

这是为了成就

为什么这些订单的排序方式与物理布局不对应？

然后我们看到

<ol class="-list">

<li class="-item">
    <a href="#" class="-link js-inbox-button topbar-icon-on"
       title="Recent inbox messages">

等等其他菜单项。这是更明智的，因为项目对应于实际布局的顺序（收件箱，成就，帮助，社区）。

为什么采用这种方法？在这个有序列表之前的奇怪排序的div有什么意义？从概念上讲，这里发生了什么？

如何修改此方法，在消息旁添加一个小X，以便用户删除该消息，然后相应地移动其他消息以填充已删除消息中的空格？

最后，鉴于我使用的是Laravel 5.3，对于jquery vs angular vs vue，是否有任何推荐的方法来实现它？

请记住，我不是开发人员 - 我只知道危险，但如果我知道如何完成编码任务，我可以弄明白并适应我的情况。

谢谢！

布赖恩