新添加的内容与现有内容的设计不同。
这是我的完整代码：
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/
要重现我的问题：
点击附加链接
然后点击通知下拉菜单，向下滚动到最后一行<li>，您会看到附加行的设计与其他行不同。
请帮忙弄清楚。
答案 0 :(得分：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/
答案 1 :(得分：0)
我已经对您的fiddle进行了微调。唯一阻止样式与其他样式相同的是h4 div下menu-info内容的数量。当我删除一些文本时，只留下＆＃34;只需做一个小测试＆＃34;它看起来像所有其他列表项。文本正在制作，所以div的宽度大于图标右侧给出的区域，这就是它下降的原因。
您的锚标记也缺少两个类waves-effect waves-block。如果要使用JS添加这两个类，则需要在附加项目后重新初始化执行此操作的函数。
更新
如果您需要包含那么多内容，只需在max-width: 200px课程中添加.menu-info即可。 Updated Fiddle