如何隐藏li元素中的所有内容并动态插入div

Question

我正在使用twitter bootstrap。

   <div class="hero-unit span8 pull-right">
       <h5><span class="label label-info">General Account Settings</span></h5>
          <ul class="nav nav-list">
             <c:forEach items="${personUI}" var="entry">
                  <li id="${entry.key}">
                    <div class="span2 pull-left">
                       <span class="label">${entry.key}</span>
                    </div> 
                    <div class="span2">
                       <font size="2"><span><strong>${entry.value}</strong></span></font>
                    </div>
                    <div class="span2 pull-right">
                       <font size="2">
                          <span>
                             <a href="#" id="${entry.key}">
                             <span class="add-on">
                               <i class="icon-pencil"></i>
                             </span>Edit
                                <script type="text/javascript">
                                    $(function(){
                                         $(this).click(function(){
                                             $('li[${entry.key}]').hide();
                                         });
                                    });
                                 </script>
                               </a>
                          </span>
                      </font>
                    </div>
                  </li>
             </c:forEach>
          </ul>
   </div>
</div>

当用户单击编辑按钮时，必须将以下div动态添加到与编辑按钮关联的li元素。 div中的表单也应该有一个提交和关闭按钮。在提交/关闭后，div应该在发布过程后再次变为不可见，并使用新值更新相应的li元素。

<!-- Name Edit div -->
<div id="nameEdit" style="display:none;">
  <form id="editname" action="<c:url value="/editname" />" method="post">
     <div class="control-group">
        <div class="controls">
            <input type="text" placeholder="First Name" name="firstName" id="firstName" class="input-xlarge help-inline">
            <input type="text" placeholder="Last Name" name="lastName" id="lastName" class="input-xlarge help-inline">
        </div>
    </div>
  </form>
</div>

快照

Answer 1

您可以查看以下用于bootstrap的插件

Edit Inline Pligin