我想将HTML元素附加到DIV
中,但是这一元素不能像原始CSS一样获得适当的CSS。
我有一个下拉菜单,想要在其上附加新的<li>
行。
我的HTML代码:
<br/><br/>
<a href="#" class="append">Append it</a>
<div class="container">
<div class="row">
<div class="col-sm-3">
<h5>Normal Dropdown Button</h5>
<div class="panel panel-default">
<div class="panel-body">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span data-bind="label">Select One</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<div id="append">
</div>
<li><a href="#">Item 1</a></li>
<li><a href="#">Another item</a></li>
<li><a href="#">This is a longer item that will not fit properly</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<br/><br/>
我的Javascript代码:
$( document.body ).on( 'click', '.append', function( event ) {
$("#append").append("<li><a href=\"#\">Item 1</a></li>");
return false;
});
这是一个实时示例:http://jsfiddle.net/dJDHd/2136/
使用我的主要问题进行了编辑:
https://jsfiddle.net/Lr7gn020/1/
单击APPEND IT,然后单击“选择一个”按钮(“下拉菜单”)来检查附加的元素,您将发现它没有像其他CSS一样获得正确的CSS(项目测试)。
最佳答案
您已经在div
中嵌套了一个ul
,并且样式目标为.dropdown-menu>li>a
,所以div破坏了它。 div
不能是ul
的直接子代,而li
不能是div
的直接子代。如果不想让div
出现在开头,而不是在ul
中嵌套li
,而是将div
附加到$.prepend()
,则可以将li
$.append()
直接添加到菜单中。添加菜单时的菜单。如果您不在乎它们的出现位置,则可以将它们放在底部。
$(document.body).on('click', '.append', function(event) {
$(".dropdown-menu").prepend("<li><a href=\"#\">Item Test</a></li>");
return false;
});
.btn-input {
display: block;
}
.btn-input .btn.form-control {
text-align: left;
}
.btn-input .btn.form-control span:first-child {
left: 10px;
overflow: hidden;
position: absolute;
right: 25px;
}
.btn-input .btn.form-control .caret {
margin-top: -1px;
position: absolute;
right: 10px;
top: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br/><br/>
<a href="#" class="append">Append it</a>
<div class="container">
<div class="row">
<div class="col-sm-3">
<h5>Normal Dropdown Button</h5>
<div class="panel panel-default">
<div class="panel-body">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span data-bind="label">Select One</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Item 1</a></li>
<li><a href="#">Another item</a></li>
<li><a href="#">This is a longer item that will not fit properly</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<br/><br/>
关于javascript - 附加内容无法获得适当的CSS效果,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/41786705/