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 
});