Question

我想在'offset' => '1'中添加一个HTML元素，但是这个没有像原版那样得到合适的CSS。

我有一个下拉菜单，希望在其上添加新的DIV行。

我的HTML代码：

<li>

我的Javascript代码：

<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/>

这是一个实例：http://jsfiddle.net/dJDHd/2136/

以我的主要问题编辑： https://jsfiddle.net/Lr7gn020/1/

单击APPEND IT，然后单击Select One按钮（下拉菜单）检查附加元素，您将看到它没有像其他CSS一样获得正确的CSS（项目测试）。

Answer 1

您已在div中嵌套ul，并将样式定位.dropdown-menu>li>a，因此div打破了这一点。 div不能成为ul的直接子女而且li无法成为div的直接子女。不是在div中嵌套ul，而是将li添加到div，您可以$.prepend() li＆直接进入菜单，如果您希望它们在添加时显示在菜单的开头。如果您不关心它们出现的位置，您可以$.append()将它们放在最底层。

＆＃13;

$(document.body).on('click', '.append', function(event) {
  $(".dropdown-menu").prepend("<li><a href=\"#\">Item Test</a></li>");
  return false;
});

＆＃13;

.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%;
}

＆＃13;

<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/>

＆＃13;

Answer 2

更改jquery部分。

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

    $(".dropdown-menu").append("<li><a href=\"#\">Item 1</a></li>"); //append with ul, not div

    return false;

});

Answer 3

附加选项背后具有不同css的原因是由于您将其附加到div元素中。

li元素的当前CSS来自带有此选择器的bootstrap css。

   dropdown-menu>li>a

由于你在ul中有一个div节点（这是错误的并且使html无效）并且你在这个div中用JS附加一个新的li，上面的选择器将不会到达这个节点并且不会应用CSS。

您应该直接在ul节点下添加li节点。

小提琴：http://jsfiddle.net/9med3Lou/

附加内容无法获得正确的CSS效果

3 个答案: