.blur() jQuery

Par tonymx227, il y a 14 ans

Javascript

Bonjour,

Alors voilà je rencontre un petit problème en jQuery, j'ai un effet sur un "div" qui permet d'afficher un autre "div" en utilisant la fonction "slideToggle()"...

On clique sur le "DIV1", le "DIV2" apparaît et le "DIV1" disparaît, lorsque l'on clique sur le "DIV2" le "DIV1" réapparaît, cependant, dans le "DIV2" il y a un lien, alors lorsque je clique sur le lien je voudrais pas que l'effet se fasse, je voudrais que mon "DIV2" reste visible, que le slideToggle ne se lance pas...

Cependant ça me semble normal car lorsque je clique sur le lien du "DIV2" c'est comme si je cliquais sur un espace du "DIV2" donc il applique l'effet... Mais comment remédier à ce problème, j'ai pensé à la fonction .blur(), mais je ne vois pas comment l'utiliser !

Anthony

$("div.DIV2").css({display: "none"});
$("div.DIV1").click( function(){
    $(this).slideUp();
    $(this).next("div.DIV2").slideDown();
});
$("div.DIV2").click( function(){
    $(this).prev().slideDown();
    $(this).slideUp();
});

14 réponses

luffysan, il y a 14 ans

Par contre j'ai pas compris ce que tu veux faire.

luffysan, il y a 14 ans

$("div.DIV2").css({display: "none"}); => $("div.DIV2").hide();

tonymx227, il y a 14 ans

Je veux que lorsque je clique dans un lien du DIV2, ça ne cache pas le DIV2...

luffysan, il y a 14 ans

Au pire tu enlève l'évènement qui est dessus du genre avec .off() ou .unbind() quand tu clique sur le lien.

tonymx227, il y a 14 ans

ça ne marche avec le .off() et le .unbind()...

extrarox, il y a 14 ans

Salut,

J'ai tapé ça chez moi et j'ai accès au lien :

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <div class="DIV1" style="border: 1px solid black; width: 100px; height: 100px;">
            <p>DIV1</p>
        </div>
        <div class="DIV2" style="border: 1px solid black; width: 100px; height: 100px;">
            <p>DIV2</p>
            <a href="index.html">Essai</a>
        </div>
    </body>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("div.DIV2").css({display: "none"});
            $("div.DIV1").click( function(){
                $(this).slideUp();
                $(this).next("div.DIV2").slideDown();
            });
            $("div.DIV2").click( function(){
                $(this).prev().slideDown();
                $(this).slideUp();
            });           
        });
    </script>
</html>

Peux-tu envoyer ton code pour que je vois mieux le problème?

A+

tonymx227, il y a 14 ans 
$("div.DIV2").css({display: "none"});
    $("div.DIV1").click( function(){
        $(this).slideUp('400','linear');
        $(this).next("div.DIV2").slideDown('400','linear');
    });
    $("div.DIV2").click( function(){
        $(this).prev().slideDown('400','linear');
        $(this).slideUp('400','linear');
    });

Le problème c'est que dans DIV il y a un lien...

extrarox, il y a 14 ans

salut,

tu peux envoyer aussi le html stp ?

tonymx227, il y a 14 ans 
<div class="DIV1">
                <h3>fjkldsljk</h3>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                <img src="img/projects/zoomoun.png" alt="">
            </div>
            <div class="DIV2">
                <p><font color="#0DB6D7">Lien du site :</font> <i><a href="#" target="_blank">fsdkl</a></i></p>
                <p><font color="#0DB6D7">Partis réalisé sur le projet :</font> <i>fkds</i></p>
                <p><font color="#0DB6D7">Date de lancement :</font> <i>flmkdslkm</i></p>
                <p><font color="#0DB6D7">Langages utilisés :</font> <i>fdskjflj</i></p>
                <p><font color="#0DB6D7">Plugin :</font> <i>fsdkllkjds</i></p>
            </div>
extrarox, il y a 14 ans

Salut,

Chez moi en copiant exactement ton code, j'arrive à cliquer sur le lien.

A+

extrarox, il y a 14 ans

AAAAAAh méaculpa, j'avais pas compris que tu voulais qu'il reste désolé, je te tiens au courant ;)

tonymx227, il y a 14 ans

Oui mais le DIV2 disparaît... Moi je veux qu'il reste...

extrarox, il y a 14 ans

C'est bon et j'ai testé ça fonctionne :

$(document).ready(function(){
            $("div.DIV2").css({display: "none"});
            $("div.DIV1").click( function(){
                    $(this).slideUp('400','linear');
                    $(this).next("div.DIV2").slideDown('400','linear');
            });

            var estSurLien = false;
            $("div.DIV2 a").each(function(){
                $(this).mouseenter(function(){
                    estSurLien = true;
                });

                $(this).mouseleave(function(){
                    estSurLien = false;
                });
            });

            $("div.DIV2").click( function(){
                if(!estSurLien){
                    $(this).prev().slideDown('400','linear');
                    $(this).slideUp('400','linear');
                }
            });         
        });

A+

tonymx227, il y a 14 ans

Merci ;)