Question

我正在尝试使用click函数展开元素，更改元素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

尝试将on()用于动态添加的类，例如

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

单击jQuery打开和关闭

2 个答案: