Question

需要帮助删除＆＃34;关闭＆＃34;图标如果不活动

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

并且注意到它每次点击都会不断重复追加

Answer 1

您可以使用css在li处于活动状态时显示和隐藏它，而不是尝试添加和删除关闭图标，然后您可以使用css显示和隐藏它

参见示例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;
}

<强> HTML

<ul id="mason2">                        
    <li><div class="rep">1111111</div><p class="close">[close]</p></li>
    <li><div class="rep">22222222</div><p class="close">[close]</p></li>
    <li><div class="rep">3333333</div><p class="close">[close]</p></li>
    <li><div class="rep">44444444</div><p class="close">[close]</p></li>
    <li><div class="rep">55555555</div><p class="close">[close]</p></li>
    <li><div class="rep">666666666</div><p class="close">[close]</p></li>
    <li><div class="rep">7777777</div><p class="close">[close]</p></li>
    <li><div class="rep">88888</div><p class="close">[close]</p></li>
</ul>

如果处于活动状态，则添加关闭图标，如果不活动则删除它

1 个答案: