2

Tenho o seguinte ul > li

<ul class="list-group no-radius no-border" id="mails-list">
    <?php foreach($lista as $valor){ ?>
    <!-- mail in mails -->
    <li class="list-group-item <?php if($valor->men_status==0){ echo "b-default"; } ?> visualizar_mensagem" data-id="<?php echo $valor->men_id; ?>" <?php if($valor->men_status > 0){ ?>style="border-left: 3px solid #CCCCCC;"<?php } ?>>
        <div class="media">
            <div class="pull-left">
                <div class="controls">
                    <?php if($valor->men_resposta=='1'){ ?> <a href="javascript:;" title="Esta mensagem requer resposta!" class="reply_<?php echo $valor->men_id; ?>" <?php if($valor->total_respostas > 0){ ?>style="color:#F5F5F5;" <?php } ?> data-toggle="active"><i class="fa fa-reply"></i></a><?php } ?>
                    <label class="checkbox checkbox-custom-alt checkbox-custom-sm m-0 mail-select"><input type="checkbox"><i></i></label>
                </div>
                <div class="thumb thumb-sm">
                    <div class="img-circle bg-greensea"><?php echo substr($valor->usu_id, 0, 1); ?></div>
                </div>
            </div>
            <div class="media-body">
                <div class="media-heading m-0">
                    <strong><?php echo $valor->usu_id; ?></strong> - <?php echo $valor->set_assunto; ?>

                    <span class="pull-right text-sm text-muted">
                      <span class="hidden-xs"><strong><?php echo date("d/m/ H:i", strtotime($valor->men_data)); ?></strong></span>
                    </span>
                </div>
                <small><?php echo $valor->men_mensagem; ?></small><br>
            </div>
        </div>                              
    </li> 
    <div class="resposta_<?php echo $valor->men_id; ?>"></div>
    <?php } ?>
</ul>

Até o presente, funciona 100% como deve funcionar. O seguinte jQuery faz o load que eu preciso:

// caixa de entrada - responder (visualizar)
$(".visualizar_mensagem").click(function(){     
    $(this).css("background","#F5F5F5");
    var id_mensagem = $(this).attr('data-id');          
    var url = '<? echo base_url("ajax/mensagens_responder"); ?>/'+id_mensagem;
    $(".resposta_"+id_mensagem).css("display", "block");
    $.get(url, function(dataReturn) {
        $(".resposta_"+id_mensagem).load(url);
    }); 

    // contagem de nao lidas
    var url_nao_lida = '<? echo base_url("ajax/contar_mensagens"); ?>/';
    $.get(url_nao_lida, function(dataReturnMSG) {
        $(".total_nao_lida").html(dataReturnMSG);
    });             
});

Minha dúvida é: Como eu faço que, ao clicar novamente na div visualizar_mensagem, ele feche a div aberta? Ou ao clicar em outra div (de baixo por exemplo, ele feche a anterior)?

1 Resposta 1

1

Podes percorrer todas as ".visualizar_mensagem" e verificar se o ID é o mesmo que o clicado. Seria melhor se desses uma classe ao que está aberto, assim o seletor para fechar podia ser mais eficaz.

$(".visualizar_mensagem").click(function(){
    // aqui percorres todas as mensagens
    $(".visualizar_mensagem").css("background","none"); // ou o valor inicial
    $("div[class*=' resposta_']").css("display", "none"); // "class*=" procura por classes que contenham uma dada string

    // etc
    $(this).css("background","#F5F5F5");
    var id_mensagem = $(this).attr('data-id');  

Mas se desses uma classe aos elementos abertos podias usar isso como seletor.

10
  • Neste caso, me retorna: Uncaught SyntaxError: Unexpected token *= Commented 5/11/2017 às 21:12
  • @AndréBaill faltavam umas aspas, desculpa. Tenta de novo pf
    – Sergio
    Commented 5/11/2017 às 21:14
  • ok mas ele não fechou as demais... Continuam abertas. Commented 5/11/2017 às 21:15
  • s*=' resposta_'] havia sobrado um espaço aqui, deu certo. Commented 5/11/2017 às 21:17
  • Ok, ótimo @AndréBaill
    – Sergio
    Commented 5/11/2017 às 21:18

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .