Jquery ajouter un clic pour faire glisser le panneau?

Question

Je le panneau de diapositive suivante, j'ai bricolé à l'aide des tutoriels etc ...

$(document).ready(function() { 

$(".dropdown dt a").click(function() { 
    $(".dropdown dd #panel").slideDown(150); 
}); 

$(".dropdown dd #panel a").click(function() { 

    $(".dropdown dd #panel").slideUp(150); 

}); 

var myTimeout = null; 
$(".dropdown").bind("mouseleave", function() { 
    myTimeout = window.setTimeout(function() { 
     $(".dropdown dd #panel").slideUp(150); // <-- 1000ms 
    }, 1000);$('.dropdown dt a').removeClass('active'); 
}); 

$(".dropdown dd #panel").bind("mouseenter",function() { 
    window.clearTimeout(myTimeout); 
}); 

});

Cependant, je n'arrive pas à comprendre comment cliquer pour faire apparaître le panneau.

Actuellement, vous cliquez et le panneau glisse vers le bas, vous allez dans le panneau et à l'extérieur et il glisse vers le haut.

Je veux ajouter qu'une fois que vous avez cliqué pour afficher le panneau, vous pouvez cliquer pour le fermer aussi?

Vous avez donc deux façons de le fermer, en éloignant la souris ou en cliquant à nouveau sur le bouton. Peut-être ajouter une classe active pour que je puisse avoir une flèche ou quelque chose qui change pour s'ouvrir puis se fermer?

Quelqu'un aide-t-il en ajoutant un clic pour faire glisser la fonction de sauvegarde?

Un grand merci si vous pouvez :)

Thanks guys. 

ajouter votre code Essayé Brian mais a réussi à briser complètement, je ne mis évidemment pas au bon endroit :(

modifier

Ajout des conseils Brians ...

$(document).ready(function() { 



$(".dropdown dt a").click(function(){ 
    if($(".dropdown dd #panel").hasclass('open'){ 
     $(".dropdown dd #panel").slideDown(150).addClass('open'); 
    } else { 
     $(".dropdown dd #panel").slideUp(150).removeClass('open'); 
    } 
});   


$(".dropdown dd #panel a").click(function() { 
    $(".dropdown dd #panel").slideUp(150).removeClass('open');; 
}); 

var myTimeout = null; 
$(".dropdown").bind("mouseleave", function() { 
    myTimeout = window.setTimeout(function() { 
     $(".dropdown dd #panel").slideUp(150); // <-- 1000ms 
    }, 1000);$('.dropdown dt a').removeClass('active'); 
}); 

$(".dropdown dd #panel").bind("mouseenter",function() { 
    window.clearTimeout(myTimeout); 
}); 

});

Answer 1

Vous aurez besoin de suivre l'état du panneau parce que vous avez deux déclencheurs de fermeture (donc un simple écouteur à bascule ne suffira pas). Vous pouvez ajouter une variable js (ok, mais pas génial) ou utiliser une classe (meilleure) pour la suivre. Ensuite, conditionnellement test vous êtes à des clic auditeurs pour déterminer ce qu'il faut faire:

$(".dropdown dt a").click(function(){ 
    if($(".dropdown dd #panel").hasClass('open'){ 
     $(".dropdown dd #panel").slideDown(150).addClass('open'); 
    } else { 
     $(".dropdown dd #panel").slideUp(150).removeClass('open'); 
    } 
}); 

Assurez-vous que vous ajoutez la méthode removeClass à l'auditeur près que vous avez sur la balise d'ancrage intérieur ainsi:

$(".dropdown dd #panel a").click(function() { 
    $(".dropdown dd #panel").slideUp(150).removeClass('open');; 
}); 

Answer 2

Jetez un oeil à l'exemple 4a http://www.webdesignerwall.com/tutorials/jquery-tutorials-for-designers/