添加一个关闭图标，如果活动和删除它，如果不活动

adding a close icon if active and removing it if not active

本文关键字：如果 活动 不活动 如果不 删除 图标 一个 添加      更新时间：2023-09-26

需要帮助删除"关闭"图标

代码我有

    $("#mason2 li div").click(function() {
    $(this).parent().hide().appendTo("#mason2").fadeIn(200);
    $(this).append('<p class="close">[close]</p>'); 
    if (
        $(this).hasClass('active')) {
        $(this).removeClass('active');              
    } else {
        $(this).addClass('active');
        $(this).parent().hide().prependTo("#mason2").fadeIn(200);           
    }   
    });
我注意到每次点击
时它都会重复这个追加符

你可以把它插入到所有的li标签中，而不是尝试添加和删除关闭图标，然后你可以使用css来显示和隐藏它，当li是活动的

参见示例JSFiddle

脚本

$("#mason2 li div").click(function() {
    $("#mason2 li.active").appendTo("#mason2").fadeIn(200);
    $("#mason2 li.active").removeClass('active');
    $(this).parent().toggleClass('active');
    $(this).parent().hide().prependTo("#mason2").fadeIn(200);
});
CSS 

#mason2 {
    margin: 0;
    position: relative;
    width: 300px;
}
.close{
    color: red;
    width: 16px;
    height: 16px;
    display: none;
}
.active .close {
    display:block;
}

相关文章：