我想将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>&nbsp;<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>&nbsp;<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/

10-10 14:10
查看更多