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" анимировать высоту: 100px когда кран это? (высота по умолчанию - 30 пикселей)

Я не мог использовать Складной модуль на 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