如何隐藏li元素中的所有内容并动态插入div [英] how to hide everything inside a li element and insert a div dynamically

问题描述

我正在使用Twitter引导程序.

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>

当用户单击编辑按钮时，必须将以下div动态添加到与编辑按钮关联的li元素. div内的表单还应该具有一个提交和关闭按钮.在提交/关闭div之后，在发布过程并使用新值更新相应的li元素后，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>

快照

推荐答案

您可以查看以下用于引导程序的插件

You can look into the following plugin for bootstrap

编辑内联木脂蛋白

这篇关于如何隐藏li元素中的所有内容并动态插入div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！