javascript - 如何构建一个 jQuery 支持的切换器来添加/删除 css 属性？

Question

我正在尝试构建一个盒子容器，在单击“阅读更多”按钮时展开，在单击同一按钮(现在是“折叠”按钮)时折叠到初始大小。

在 DOM 中，我在 .post 容器中有一个 .leer-mas 按钮。以及以下 jQuery 代码:

//When link with class .leer-mas is clicked, get the parent element's id and add some css attributes
$('.leer-mas').click(function() {
    var item = $(this).closest('.post');
    item.css('height', 'auto');
    $(this).addClass('leer-menos');
    $(this).text('Leer menos');         
});


//When link with class .leer-mas is clicked, get the parent element's id and remove some css attributes
$('.leer-mas.leer-menos').click(function() {
    var item = $(this).closest('.post');
    item.removeAttr('height');
    $(this).removeClass('leer-menos');
})

第一个 Action 就像一个魅力。但是第二个 Action 什么都不做……而且我认为我缺少 jQuery 的一些基础知识，因为语法是相同的，也许这不是它应该的方式:)

有什么想法吗？谢谢。

编辑 - 我的代码有一些错误。虽然我仍在尝试使用单个切换器来获得它，但我有一个可用的版本。

新的 DOM 看起来像这样:

<div class="post">
    <div class="leer mas">
    </div>
    <div class="leer menos">
    </div>
</div>

代码现在看起来像这样:

//When link with class .leer-mas is clicked, get the parent element's id (which is also that element's id in the database)
$('.leer.mas').click(function() {
    var item = $(this).closest('.post');
    //Send the id to the PHP script, which returns 1 if successful and 0 if not
    item.css('height', 'auto');
    $(this).hide();
    $(this).next('.leer.menos').show();
});


//When link with class .leer-mas is clicked, get the parent element's id (which is also that element's id in the database)
$('.leer.menos').click(function() {
    var item = $(this).closest('.post');
    //Send the id to the PHP script, which returns 1 if successful and 0 if not
    item.removeAttr('style');
    $(this).hide();
    $(this).prev('.leer.mas').show();
});

这很顺利。但是，如果我让它与原始问题的预期结构一起工作(使用一个按钮)，我会更开心:)

Answer 1

这是因为类leer-menos是动态添加的...所以当执行事件注册代码时，没有类元素 leer-mas和 leer-menos .

一个可能的解决方案是使用事件委托(delegate)

//When link with class .leer-mas is clicked, get the parent element's id and remove some css attributes
$(document).on('click', '.leer-mas.leer-menos', function() {
    var item = $(this).closest('.post');
    item.removeAttr('height');
    $(this).removeClass('leer-menos');
})