Comportement au moment du click sur une autre div

Bonjour à tous,

J'ai créer un petit script jquery pour que quand je clique sur une image un menu déroule et quand je reclique dessus, il se ré enroule.
Il y a trois images en tout, avec 3 menus différents.
Pour le moment, si je clique sur mes trois menu, tous les menus sont alors déroulés.
Je souhaiterai que, quand je clique sur une image pour faire dérouler le menu 2, le menu se ferme.
Je ne trouve pas la solution, pourriez vous m'aiguiller, voici mes codes.
Merci infiniment !

<script type="text/javascript">
$(document).ready(function () {
    $('img.menu_1').click(function () {
        $('ul.menu_11').slideToggle('medium');
    });
    $('ul.menu_11 li a').mouseover(function () {
        $(this).animate({ fontSize: "1.3em" }, 150 );
    });
    $('ul.menu_11 li a').mouseout(function () {
        $(this).animate({ fontSize: "1em"}, 150 );
    });
    $('img.menu_2').click(function () {
        $('ul.menu_22').slideToggle('medium');
    });
    $('ul.menu_22 li a').mouseover(function () {
        $(this).animate({ fontSize: "1.3em" }, 150 );
    });
    $('ul.menu_22 li a').mouseout(function () {
        $(this).animate({ fontSize: "1em"}, 150 );
    });
    $('img.menu_3').click(function () {
        $('ul.menu_33').slideToggle('medium');
    });
    $('ul.menu_33 li a').mouseover(function () {
        $(this).animate({ fontSize: "1.3em" }, 150 );
    });
    $('ul.menu_33 li a').mouseout(function () {
        $(this).animate({ fontSize: "1em"}, 150 );
    });
});
</script>

et le html

 <div id="logo-archi"><a href="#"><img class="menu_1" src="img/architecture.jpg" height="74px" width="256px" alt="Menu Architecture"/></a></div>
                <ul class="menu_11">
                    <li><a href="#">Logements</a></li>
                    <li><a href="#">Batiments publics</a></li>
                    <li><a href="#">Bureaux</a></li>
                    <li><a href="#">Particulier</a></li>
                </ul>
            </div>
            
            <div id="agence">
                <div id="logo-agence"><a href="#"><img class="menu_2" src="img/agence.jpg" height="70px" width="144px" alt="Menu Agence"/></a></div>
                <ul class="menu_22">
                    <li><a href="#">Cv</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
            
            <div id="design">
                <div id="logo-design"><a href="#"><img class="menu_3"  src="img/design.jpg" height="70px" width="124px" alt="Menu Design"/></a></div>
                <ul class="menu_33">
                    <li><a href="#">Lampe</a></li>
                    <li><a href="#">Assise</a></li>
                    <li><a href="#">Table</a></li>
                </ul>
            </div>

Et l'eau,

La construction telle qu'elle est n'est pas bonne....

<div class="accordeon">

	<h1>un titre</h1>

	<div class="conteneur">

		<ul>

			<li>sfsd</li>

			<li>sdfsdfs</li>

			<li>sdfsdfsd</li>

		</ul>

	</div>

	<h1>un titre</h1>

	<div class="conteneur">

		<ul>

			<li>sfsd</li>

			<li>sdfsdfs</li>

			<li>sdfsdfsd</li>

		</ul>

	</div>

	<h1>un titre</h1>

	<div class="conteneur">

		<ul>

			<li>sfsd</li>

			<li>sdfsdfs</li>

			<li>sdfsdfsd</li>

		</ul>

	</div>

	<h1>un titre</h1>

	<div class="conteneur">

		<ul>

			<li>sfsd</li>

			<li>sdfsdfs</li>

			<li>sdfsdfsd</li>

		</ul>

	</div>

	<h1>un titre</h1>

	<div class="conteneur">

		<ul>

			<li>sfsd</li>

			<li>sdfsdfs</li>

			<li>sdfsdfsd</li>

		</ul>

	</div>

</div>

$('h1+.conteneur').hide();
$('h1').css('cursor','pointer');


$('h1').click(function(e){

	e.preventDefault();

	var divConteneur = $('h1').next('div');

	if(!divConteneur.is(":visible")){

		$('h1').closest('.accordeon').find('.conteneur').slideUp();

		divConteneur.slideDown();

	}else{

		divConteneur.slideUp();

	}

});

voili voilou
Modifié par niuxe (20 May 2011 - 20:38)

Bonjour,
merci pour votre réponse, mais ca ne me convient pas. La ca fait vraiment accordeon, alors que mes 3 menus sont indépendants, dans votre cas, ils s'ouvrent et se ferme tous en même temps. Ca ne va pas. Moi je veux que les 3 soient indépendants, quand on en ouvre 1, les autres sont fermé, et quand on en ouvre un autre, le précédent se ferme.

merci pour votre aide

Personne pour m'aider ?

En bossant avec les sélecteurs et l'API de Traversing de jQuery (RTFM ), tu devrais pouvoir t'en sortir.

En gros quand tu cliques sur un titre, il faut:
- Ouvrir ou fermer le sous-menu correspondant (à priori c'est le nextSibling du titre cliqué), en fonction de l'état de ce dernier (visible ou masqué).
- Ouvrir ou fermer les autres sous-menus.

La logique pourrait être:

$('.titre-section').click(function(){
  var $submenu = $(this).nextSibling();
  if ($submenu.is(':visible')) {
    // On ferme le sous-menu et puis c'est marre
    $submenu.allezHopOnFerme();
  } else {
    // On ouvre le sous-menu et on ferme les autres
    $('.sous-menu:visible').allezHopOnFerme();}
    $submenu.allezHopOnOuvre();
  }
});

À noter:
- Faut voir dans la doc jQuery quels sont les méthodes et mécanismes disponibles. Le code ci-dessus n'est pas fonctionnel tel quel.
- Il faudrait s'assurer que les titres de section sont des liens, pointant vers l'URL d'une page qui présente des liens vers les différentes pages de la section. Ne jamais se reposer complètement sur un mécanisme de menu déroulant!