附加的内容没有得到正确的CSS样式

Question

新附加的内容与现有内容的设计不同。

这里是我的完整代码：

HTML

<!-- Top Bar -->
<nav class="navbar">
    <div class="container-fluid">


        <div class="collapse navbar-collapse" id="navbar-collapse">
            <ul class="nav navbar-nav navbar-right">


                <!-- Notifications -->
                <li class="dropdown">
                    <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button">
                        <i class="material-icons">notifications</i>
                        <span class="label-count">7</span>
                    </a>
                    <ul class="dropdown-menu">
                        <li class="header">NOTIFICATIONS</li>
                        <li class="body">
                            <ul class="menu" id="append">
                                <li>
                                    <a href="javascript:void(0);">
                                        <div class="icon-circle bg-light-green">
                                            <i class="material-icons">person_add</i>
                                        </div>
                                        <div class="menu-info">
                                            <h4>12 new members joined</h4>
                                            <p>
                                                <i class="material-icons">access_time</i> 14 mins ago
                                            </p>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:void(0);">
                                        <div class="icon-circle bg-cyan">
                                            <i class="material-icons">add_shopping_cart</i>
                                        </div>
                                        <div class="menu-info">
                                            <h4>4 sales made</h4>
                                            <p>
                                                <i class="material-icons">access_time</i> 22 mins ago
                                            </p>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:void(0);">
                                        <div class="icon-circle bg-red">
                                            <i class="material-icons">delete_forever</i>
                                        </div>
                                        <div class="menu-info">
                                            <h4><b>Nancy Doe</b> deleted account</h4>
                                            <p>
                                                <i class="material-icons">access_time</i> 3 hours ago
                                            </p>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:void(0);">
                                        <div class="icon-circle bg-orange">
                                            <i class="material-icons">mode_edit</i>
                                        </div>
                                        <div class="menu-info">
                                            <h4><b>Nancy</b> changed name</h4>
                                            <p>
                                                <i class="material-icons">access_time</i> 2 hours ago
                                            </p>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:void(0);">
                                        <div class="icon-circle bg-blue-grey">
                                            <i class="material-icons">comment</i>
                                        </div>
                                        <div class="menu-info">
                                            <h4><b>John</b> commented your post</h4>
                                            <p>
                                                <i class="material-icons">access_time</i> 4 hours ago
                                            </p>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:void(0);">
                                        <div class="icon-circle bg-light-green">
                                            <i class="material-icons">cached</i>
                                        </div>
                                        <div class="menu-info">
                                            <h4><b>John</b> updated status</h4>
                                            <p>
                                                <i class="material-icons">access_time</i> 3 hours ago
                                            </p>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:void(0);">
                                        <div class="icon-circle bg-purple">
                                            <i class="material-icons">settings</i>
                                        </div>
                                        <div class="menu-info">
                                            <h4>Settings updated</h4>
                                            <p>
                                                <i class="material-icons">access_time</i> Yesterday
                                            </p>
                                        </div>
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li class="footer">
                            <a href="javascript:void(0);">View All Notifications</a>
                        </li>
                    </ul>
                </li>
                <!-- #END# Notifications -->



            </ul>
        </div>
    </div>
</nav>
<br/><br/> <br/><br/> <br/><br/>
<a href="#" class="append">Append it</a>

JAVASCRIPT

$( document.body ).on( 'click', '.append', function( event ) {

      $("#append").append(
                                    "<li>"+
                                        "<a href=\"javascript:void(0);\">"+
                                            "<div class=\"icon-circle bg-purple\">"+
                                                "<i class=\"material-icons\">settings</i>"+
                                            "</div>"+
                                            "<div class=\"menu-info\">"+
                                                "<h4>Just make a small Test to see the problem</h4>"+
                                                "<p>"+
                                                    "<i class=\"material-icons\">access_time</i> Yesterday"+
                                                "</p>"+
                                            "</div>"+
                                        "</a>"+
                                    "</li>"
      );

      return false;

});

--一个测试它并查看我的问题的真实示例：

https://jsfiddle.net/Lr7gn020/1/

来重现我的问题：

• 点击附加链接
• 然后单击Notification下拉菜单并向下滚动到最后一个<li>行，您将看到附加行的设计与其他行不同。

请帮我弄清楚。

Answer 1

在追加新项目时，您遗漏了几个类。原始项中的a标记已经应用了waves-effect和waves-block类，但是您没有在新添加的元素中为其提供这些类。

尝试将"<a href=\"javascript:void(0);\">"更改为"<a href=\"javascript:void(0);\" class=\" waves-effect waves-block\">"

更新的JSFiddle：https://jsfiddle.net/Lr7gn020/3/

Answer 2

我对你的小提琴做了个小调整。唯一阻止样式与其他样式相同的是h4中menu-info div下的内容数量。当我删除一些文本，只留下“只做一个小测试”，它看起来像所有的其他列表项目。文本是这样的，所以div的宽度比图标右边的区域要大，这就是为什么它正在下降的原因。

锚标记也缺少两个类waves-effect waves-block。如果要使用JS添加这两个类，则需要在附加项之后重新初始化执行此操作的函数。

更新

如果您需要有那么多内容，那么只需将一个max-width: 200px添加到您的.menu-info类即可。更新Fiddle