jQuery的打開和關閉的點擊

Question

我試圖使用點擊功能擴展的元素，改變要素的HTML，和上再次點擊最小化元素

我寫了這個jQuery代碼

$(".servicereadmore").click(function() { 
    $('.myinfo').css("height", "100%"); 
    $(this).html("Read less"); 
    $(this).removeClass("servicereadmore"); 
    $(this).addClass("servicereadless"); 
}); 
$(".servicereadless").click(function() { 
    $('.myinfo').css("height", "200px"); 
    $(this).html("Read more"); 
    $(this).removeClass("servicereadless"); 
    $(this).addClass("servicereadmore"); 
}); 

servicereadmore和servicereadless是錨標記的類。

首屆點擊觸發精細，MyInfo的DIV擴大和錨的標記文字和階級的變化，但是第二次點擊功能將不會觸發

Answer 1

你需要event delegation。使用.on()代替：

  $(document).on('click',".servicereadmore",function() { 
       $('.myinfo').css("height" , "100%"); 
       $(this).html("Read less"); 
       $(this).removeClass("servicereadmore"); 
       $(this).addClass("servicereadless"); 
       }); 

      $(document).on('click', ".servicereadless" ,function() { 
       $('.myinfo').css("height" , "200px"); 
       $(this).html("Read more"); 
       $(this).removeClass("servicereadless"); 
       $(this).addClass("servicereadmore"); 
      }); 

Answer 2

嘗試使用​​動態添加類，如

$(document).on('click',".servicereadmore",function() { 
    $('.myinfo').css("height", "100%"); 
    $(this).html("Read less") 
      .toggleClass("servicereadmore servicereadless"); // use toggleClass 
}); 
$(document).on('click',".servicereadless",function() { 
    $('.myinfo').css("height", "200px"); 
    $(this).html("Read more") 
      .toggleClass("servicereadmore servicereadless"); // use toggleClass 
});