| 

.NET C# Java Javascript Exception

2
Hallo zusammen, ich hab eine verticale navigation zusammengebaut die sobald eine unternavigationspunkt bekommt, eine klasse hinzufügt wird die mit einem icon versehen wird und wenn mann dann auf das icon klickt das submenü ausgeklapt wird.

das ganze sieht so aus:
$(".menu li:has(ul)").addClass("parent").append('<span><b class="caret"></b></span>');
$('.menu .sub-menu').hide();
$('.menu span').click(function() {
$(this).prev(".sub-menu").slideToggle("slow");
});


das problem:
ich würde jetzt gerne die funktion so erweitern das der ausklapmechanismus auch beim klick auf den eigentlichen navipunkt ebenso ausklapt. Im moment funktioniert es nur wenn ich auf das icon klicke.

mein Lösungsversuch der nur zum teil richtig arbeitet:
$('#access .menu a').click(function() {
$(".sub-menu").slideToggle("slow");
});


hier wird zwar das submenu ausgeklapt, jedoch werden alle anderen submenüs ebenso angesprochen! Hat jemand ne idee wie ich nur das submenü anspreche dessen link angeklickt wird?

gruß Giovanni
09.10.2012
GioCece 152 1 6
Kannst du bitte ein Stück HTML posten das als Beispiel dient. Damit man sich die Struktur besser vorstellen kann.
Floyd 09.10.2012
Hinter welcher Klasse steckt die Icons?
Floyd 09.10.2012
hinter der Klasse "caret"
GioCece 09.10.2012
2 Antworten
1
Versuchs mal so:

$('#access .menu a').click(function() {
$(this).parents('LI:first').find('SPAN:first').triggerHandler('click');
});

oder

$('#access .menu a').click(function() {
$(this).parents('LI:first').find('.sub-menu:first').slideToggle("slow");
});
09.10.2012
Floyd 14,6k 3 9
Floyd 14,6k 3 9
hmm ... interresant ... bei der oberen lösung kam erstmal nix raus. hattest nen tipfehler. (ein "g" zuviel)... nach der korrektur passiert etwas komisches:
es klapt immer das dritte menü mir einer subnavigation auf. in meinem fall "About", egal ob ich nun auf portfolio oder galleries klicke. Bei der zweiten Lösung klappen alle auf.
GioCece 09.10.2012
Mein Fehler, hab geträumt ;) Versuchs nochmal.
Floyd 09.10.2012
jou, die obere lösung funktioniert wunderbar und verstanden hab ich die lösung auch nocht :) sehr gut!
Vielen Dank!
GioCece 09.10.2012
0
<nav id="access" role="navigation">
<div class="menu-main-navigation-container">
<ul id="menu-main-navigation" class="menu clearfix">

<li id="menu-item-239" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-239"><a>Protfolio</a>
<ul class="sub-menu">
<li id="menu-item-151" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-151"><a href="#">People</a></li>
<li id="menu-item-152" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-152"><a href="#">Unesco World Heritage</a></li>
</ul>
</li>

<li id="menu-item-143" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-143"><a href="#">Blog</a></li>

<li id="menu-item-144" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-144"><a href="#">Galleries</a>
<ul class="sub-menu">
<li id="menu-item-145" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-145"><a href="#">Europe</a></li>
<li id="menu-item-146" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-146"><a href="#">Africa</a></li>
<li id="menu-item-147" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-147"><a href="#">Asia</a></li>
<li id="menu-item-148" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-148"><a href="#">America</a></li>
<li id="menu-item-149" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-149"><a href="#">Antarctica</a></li>
</ul>
</li>

<li id="menu-item-82" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-82"><a href="#">About</a>
<ul class="sub-menu">
<li id="menu-item-153" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-153"><a href="#">Bio</a></li>
<li id="menu-item-174" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-174"><a href="#">Equipment</a></li>
<li id="menu-item-168" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-168"><a href="#">Experiences</a></li>
<li id="menu-item-196" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-196"><a href="#">Publications</a></li>
</ul>
</li>

<li id="menu-item-85" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-85"><a href="#">Contact</a></li>
</ul>
</div>
</nav>
09.10.2012
GioCece 152 1 6
Nutze doch bitte in Zukunft für solche Ergänzungen die Edit-Funktion an Deiner Frage. Oder baue gleich das Beispiel bei jsfiddle.net zusammen und poste hier den Link.
Matthias Hlawatsch 09.10.2012

Stelle deine Programmieren-Frage jetzt!