Блог

Я хочу знать, как проверить, отличается ли элемент от набора из нескольких элементов. В частности, основная функциональность этого заключается в том, чтобы скрыть элемент, не нажимая на эти элементы. Но, в то же время, он НЕ ДОЛЖЕН скрываться при нажатии на них.

Чат — единственный элемент, который это делает. Потому что в нем есть функция onClick.

Другими словами, он должен скрывать #chat при нажатии только на странице или в чате. Но он НЕ ДОЛЖЕН скрываться при нажатии на их дочерние элементы. Спасибо!

Я провел исследование и попробовал много разных способов, но пока не смог найти решение. Если я нажму на #chat_content, который находится внутри #chat, #chat исчезнет. Чат является родительским для этих элементов.

Метод is() возвращает true, если хотя бы один из этих элементов соответствует заданным аргументам. Итак, я ПОСТАВИЛ! чтобы провести различие.

 $(window).click(function (e){
        var targ=$(e.target);
        if(!targ.is("#chat, #chat_content, #mensajes, .online, .usuarios_online, .mensajes, #usuarios_chat, #usuarios_personal_chat")){ 
            $("#chat_content").fadeOut("slow");
            $("#mensajes").css("margin-top","3px");

        }
    })

function open_chat(){

    if($("#chat_content").is(":hidden")){

        $("#chat_content").fadeIn("slow");
        $("#mensajes").css("margin-top","0px");

    }else{

        $("#chat_content").fadeOut("slow");
        $("#mensajes").css("margin-top","3px");

    }

}

<div id='chat' onClick='open_chat()'>
        <div id='chat_content'>

        <div id='usuarios_chat' onClick='open_personal_chat()'>
        <p class='p_usuarios'><img 
  src='Zona_Contenido/Empresa/Logo_Empresa/" . $logo_empresa_chat . "' 
  class='logo_chat'/><span class='usuario_chat'></span><img 
  src='Zona_Contenido/Empresa/Image/Online.svg' class='online_chat'/> . 
  </p></div><div id='usuarios_personal_chat'></div>

        </div>
        <p id='mensajes'><img 
  src='Zona_Contenido/Empresa/Image/Online.svg' class='online'/><span 
  class='mensajes'>Chat</span><span class='usuarios_online'></span></p>
    </div>
  

Я бы установил обработчик щелчков следующим образом:

 $(window).click(function(){
  $("#chat_content").fadeOut("slow");
  $("#mensajes").css("margin-top","3px");
});
  

Таким образом, он будет срабатывать при кликах, сделанных в любом месте страницы… Чего вы, похоже, хотите.

Теперь, чтобы исключить #chat и его потомков из вышеупомянутого обработчика щелчков, я бы попробовал event.stopPropagation() :

 $("#chat").click(function(e){
  e.stopPropagation();
});
  

Таким образом, щелчок, сделанный на #chat , и любые потомки не будут всплывать до window .

Я нахожу решение с небольшой ретушью. Основная проблема заключалась в том, что я забыл добавить другие классы, которые находятся внутри #usuarios_chat, такие как .p_usuarios, .logo_chat, .usuario_chat среди них. Действительно, я думал о модульности, чтобы выяснить, что было причиной того, что не работало должным образом xD.

Итак, это окончательный код: потому что это приводило к исчезновению везде, где я нажимаю внутри элемента #chat. Я должен проверить это (ширина …) или если наследует другим 😕 функция open_chat(){

     if($("#chat_content").is(":hidden")){

        $("#chat_content").fadeIn("slow");
        $("#mensajes").css("margin-top","0px");

    }/*else {

        $("#chat_content").fadeOut("slow");
        $("#mensajes").css("margin-top","3px");

    }*/

}

   $(window).click(function (e){
        var targ=$(e.target);

        if(!targ.is("#chat, #chat_content, #mensajes, .online, .usuarios_online, .p_usuarios, .logo_chat, .usuario_chat, .mensajes, #usuarios_chat, #usuarios_personal_chat")){ 
            $("#chat_content").fadeOut("slow");
            $("#mensajes").css("margin-top","3px");
        }   

    })