how to hide everything inside a li element and insert a div dynamically

问题

I am using 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>

When the user clicks the edit button the following div must be added dynamically to the li element to which the edit button is associated. The form inside the div should also have a submit and close button. on submit/close the div should again become invisible after posting process and updating the corresponding li element with the new value.

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

Snapshot

回答1:

You can look into the following plugin for bootstrap

Edit Inline Pligin

来源：https://stackoverflow.com/questions/14944122/how-to-hide-everything-inside-a-li-element-and-insert-a-div-dynamically