Question

我正在尝试构建一个盒子容器，当单击“更多”按钮时会扩展，并在单击相同按钮时折叠到初始大小（现在是“折叠”按钮）。

在DOM中，我在.leer-mas容器中有一个.post按钮。以下是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');
})

第一个动作就像一个魅力。但是第二个动作什么也没做......而且我认为我缺少一些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的元素。

可能的解决方案是使用事件委托

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

Answer 2

您尝试使用.removeAttr()删除属性“Style”中的CSS属性。这不正确，请尝试使用item.removeAttr('style');

Answer 3

不完全是你要求的，但你可以从中得出想法：

$('.leer-mas').click(function() {
    var item = $(this).closest('.post');
    // toggle "height" between 'auto' and null
    item.css('height', item.css('height') == 'auto' ? null : 'auto' );
    // toggle class 'leer-menos'
    $(this).toggleClass('leer-menos');
    // toggle text between 'Leer menos' and ''
    $(this).text( $(this).is('.leer-menos') ? 'Leer menos' : '' );         
});

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

3 个答案: