.blur() jQuery

tonymx227
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

extrarox
Réponse acceptée

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+

luffysan

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

luffysan

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

tonymx227
Auteur

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

luffysan

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

tonymx227
Auteur

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

extrarox

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
Auteur 
$("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

salut,

tu peux envoyer aussi le html stp ?

tonymx227
Auteur 
<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

Salut,

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

A+

tonymx227
Auteur

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

extrarox

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

tonymx227
Auteur

Merci ;)