jQuery的移动动画高度当点击列表

Question

我正在用JQuery做一个可扩展的列表。

这是我的例子在这里http://jsfiddle.net/z253w/

<style> 
.showDetail { height:30px } 
</style> 

<ul data-role="listview" data-split-icon="delete" data-inset="true" class="recentList"> 
      <li id="recentCall1" class="menu-item"> 
       <a href="#" class="showDetail"> 
        <h2>Title</h2> 
        <div class="detail">detail Text</div> 
       </a> 
       <a class="btnDelList" href="#">Delete</a> 
      </li> 
      <li id="recentCall2" class="menu-item"> 
       <a href="#" class="showDetail"> 
        <h2>Title</h2> 
        <div class="detail">detail Text</div> 
       </a> 
       <a class="btnDelList" href="#">Delete</a> 
      </li> 
     </ul> 
     <script> 
     var li = ''; 
     $(document.body).on('click', '.btnDelList' ,function(){ 
      li = $(this).parent(); 
      $('#popDel').popup("open"); 
     }); 

     $(document.body).on('click', '#okDel' ,function(){ 
      $('#popDel').popup("close"); 
      li.remove(); 
     }); 

     $(document.body).on('click', '#noDel' ,function(){ 
      $('#popDel').popup("close"); 
     }); 
     </script> 

     <div data-role="popup" id="popDel" data-theme="d" data-overlay-theme="b" class="ui-content" style="max-width:340px; padding-bottom:2em;"> 
      <h3>Delete product?</h3> 
      <p>Do you want to remove this product from the list?</p> 
      <input id="okDel" data-inline="true" data-mini="true" data-icon="check" type="button" value="Delete!" /> 
      <input id="noDel" data-inline="true" data-mini="true" data-icon="delete" type="button" value="No" /> 
     </div> 

怎样使“.showDetail”动画高度：100像素当轻敲呢？ （默认高度为30px）

我无法在JQM上使用折叠模块。因为很难组合删除项目脚本。

任何人都可以帮助我吗？

Answer 1

你可以使用jQuery .animate()这个方法。 让你.showDetail高度JavaScript变量像下面，

$(document).ready(function() { 
    showHeight = $(".showDetail").height(); 
}); 

，并检查高度，同时单击该元素上，然后像下面设置动画，

$(".showDetail").on("tap", function() { 
    if ($(this).height() == showHeight) $(this).animate({ 
     height: "100px" 
    }, "fast"); 
    else $(this).animate({ 
     height: showHeight 
    }, "fast"); 
}); 

看到这个DEMO