11521 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Probléme de menu déroulant

Bonjour a tous,

Je suis encore une débutant sur jquey, j'ai donc décidé de suivre le tuto du menu déroulant accordéon.

Mais je suis confronter a un problème.
J'ai mis la ligne qui permet de créer des scripts.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>


Mais le menu ne déroule pas. Et j'enlève cette ligne les menu s'affiche au survol de la souris.
Je travail avec le cms Joomla.
J'essaie de faire un site responsive donc je modifie le template.
Que dois-je faire ?
Merci d'avance de votre aide .
Modifié par apparence (26 Aug 2015 - 15:21)
Au faite voici mon code : 
<ul class="nav menu jmoddiv" data-jmodediturl="http://localhost/Jordan/index.php?option=com_config&amp;controller=config.display.modules&amp;id=1&amp;return=aHR0cDovL2xvY2FsaG9zdC9Kb3JkYW4vaW5kZXgucGhw" data-target="_self" data-jmodtip="<strong>Modifier le module</strong><br />Menu principal<br />Position: position-1" id="menu">
<li class="item-119 current active deeper parent"><a href="/Jordan/index.php">Acceuil</a>
<ul style="display: none;" class="nav-child unstyled small">
<li class="item-141"><a href="/Jordan/index.php/acceuil/lol">lol</a></li>
</ul></li>
<li class="item-140 deeper parent"><a title="afficher le sous menu" href="#">article</a>
<ul style="display: none;" class="nav-child unstyled small">
<li class="item-114"><a class="dropdown-menu" href="/Jordan/index.php/article/articles">articles</a></li>
<li class="item-128"><a href="/Jordan/index.php/article/manipulation">Manipulation</a></li>
<li class="item-129"><a href="/Jordan/index.php/article/pnl-et-secte">PNL et secte</a></li>
<li class="item-130 deeper parent"><a href="/Jordan/index.php/article/entreprise">Entreprise</a>
<ul style="display: none;" class="nav-child unstyled small"><li class="item-134"><a href="/Jordan/index.php/article/entreprise/dededededed">dededededed</a></li>
<li class="item-135"><a href="/Jordan/index.php/article/entreprise/adadadadadad">adadadadadad</a></li>
</ul>
</li>
<li class="item-131"><a href="/Jordan/index.php/article/sante">sante</a></li>
<li class="item-132"><a href="/Jordan/index.php/article/therapie">therapie</a></li>
<li class="item-133"><a href="/Jordan/index.php/article/dev-personnel">Dev Personnel</a></li>
</ul></li>
<li class="item-137 deeper parent"><a title="afficher le sous menu" href="#">La PNLs</a>
<ul style="display: none;" class="nav-child unstyled small">
<li class="item-102"><a class="dropdown-menu" href="/Jordan/index.php/la-pnls/suite">La PNL</a></li>
<li class="item-112"><a class="dropdown-menu-child" href="/Jordan/index.php/la-pnls/lol">Definition</a></li>
<li class="item-106"><a class="dropdown-menu-child" href="/Jordan/index.php/la-pnls/la-pnl">origine</a></li>
<li class="item-120"><a href="/Jordan/index.php/la-pnls/faq">FAQ</a></li>
<li class="item-121"><a href="/Jordan/index.php/la-pnls/la-pnl-pro">La PNL pro</a></li></ul></li><li class="item-138 deeper parent"><a title="afficher le sous menu" href="#">Formation</a>
<ul style="display: none;" class="nav-child unstyled small">
<li class="item-103"><a class="dropdown-menu" href="/Jordan/index.php/formation/fin">Formations</a></li>
<li class="item-107"><a class="dropdown-menu-child" href="/Jordan/index.php/formation/ressources">Decouverte</a></li>
<li class="item-108"><a class="dropdown-menu" href="/Jordan/index.php/formation/dexu">Technicien</a></li>
<li class="item-122"><a href="/Jordan/index.php/formation/praticien">praticien</a></li>
<li class="item-123"><a href="/Jordan/index.php/formation/maitre-patricien">MAitre patricien</a></li>
</ul></li>
<li class="item-139 deeper parent"><a title="afficher le sous menu" href="#">Ressource</a>
<ul style="display: none;" class="nav-child unstyled small">
<li class="item-113"><a class="dropdown-menu" href="/Jordan/index.php/ressource/ressources">Ressources</a></li>
<li class="item-124"><a href="/Jordan/index.php/ressource/bibliographie">bibliographie</a></li>
<li class="item-125"><a href="/Jordan/index.php/ressource/mail-list">mail-list</a></li><li class="item-126"><a href="/Jordan/index.php/ressource/humour">humour</a></li>
<li class="item-127"><a href="/Jordan/index.php/ressource/video">Video</a></li>
</ul></li>
<li class="item-115"><a class="dropdown-menu" href="/Jordan/index.php/hypnose">hypnose</a></li><li class="item-109"><a class="dropdown-menu" href="/Jordan/index.php/contact">contact</a>
</li></ul>



voici le css :
	#menu {
	margin: 0;
	padding: 0;
	width: 280px;
	list-style: none !important;
	font-weight: bold !important;
	color: #1265A9;
	width: 200px;
	font: 1.2em "Trebuchet MS", sans-serif;
	}
	#menu a, #menu span {
	display: block !important;
	padding: 4px 10px;
	text-decoration: none !important;
	}
	#menu a:hover, #menu a:focus, #menu a:active {
	text-decoration: underline;
	}
	#menu .small {
	font-size: .8em;
	font-size: .9em;
	margin: 0;
	padding: 0;
	border-bottom: 1px solid #666;
	}
	#menu ul.small a {
	background: none;
	padding: 3px 20px;
	}


et enfin voici le code Javascript

		<script type="text/javascript">
			$(document).ready( function () {
				$(".navigation ul.small:not('.open_at_load')").hide();
				$(".navigation li.deeper span").each( function () {
				var TexteSpan = $(this).text();
				$(this).replaceWith('<a title="afficher le sous menu" href="#">' + TexteSpan + '<\/a>') ;
				} ) ;
			$(".navigation li.deeper > a").click( function () {
				if ( $(this).next("ul.small:visible").length != 0) {
					$(this).next("ul.small").slideUp("normal", function () { $(this).parent().removeClass("open") });
				}
				else {
					$(".navigation ul.small").slideUp("normal", function () { $(this).parent().removeClass("open") });
					$(this).next("ul.small").slideDown("normal", function () { $(this).parent().addClass("open") });
				}
				return false;
				});
			} );
		</script>
Salut,

Il y a dû avoir un conflit avec une autre librairie JS que tu utilises peut-être. Dans ces cas-là tu peux recréer un alias de $ pour jQuery et le restaurer ensuite grâce à jQuery.noConfilct() au lieu de remplacer tout tes $ :
jQuery.noConflict();
(function( $ ) {
  $(function() {
    // Tu peux utiliser $ pour jQuery
  });
})(jQuery);
 
// Tu peux de nouveau utiliser $ pour une autre lib
Merci de ta réponse.

J'ai essayé ce que tu ma dit mais ca ne marche pas. Donc je vais garder mon astuces pour le moment.
Sujet clos
Aller à