Eine andere jQuery Noob Frage über Funktionen

Question

Ich möchte mehr von meinem jQuery-Code "funktionalisieren", anstatt kleine eigenständige Schnipsel zu schreiben. Hier ist ein Beispiel. Lassen Sie uns sagen, dass ich einige li haben, dass ich als Trigger verwenden möchten, etwa so:

<li class="alpha-init" id="a-init">A</li> 
<li class="alpha-init" id="b-init">B</li> 
<li class="alpha-init" id="c-init">C</li> 

Und einige Sachen, die ich auf diesen Trigger Klicks in Korrespondenz verstecken und zeigen möchten, wie so:

<ul id="a-sub" class="alpha-popdown"> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
</ul> 

<ul id="b-sub" class="alpha-popdown"> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
</ul> 


<ul id="c-sub" class="alpha-popdown"> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
</ul> 

Wenn ich für jeden Fall ein wenig Schnipsel schreiben wollte, könnte ich tun:

$('li.alpha-init #a-init').click(function(){ 
    $('ul#a-sub').slideToggle(200); 
} 

das bedeutet aber, wie viele Schnipsel zu schreiben, da es Sätze von Links und Untermenüs sind. Wie kann ich das in eine Funktion schreiben? Ich möchte nicht "einen Tag lang essen", also wäre eine Erklärung, wie Sie sich fühlen, sehr geschätzt. Vielen Dank!

Answer 1

$('li.alpha-init').click(function(){ 
    $('ul#'+this.id.substr(1) + "-sub").slideToggle(200); 
} 

Answer 2

Haben Sie darüber nachgedacht, jQuery UI Tabs dafür zu verwenden? Es klingt fast genau wie du willst. Sie können die Tabs nur anders formatieren als standardmäßig!

Answer 3

Zunächst einmal sollten IDs auf Ihrer Seite eindeutig sein. Sie müssen nur den Selektor $('#a-init') verwenden, um darauf zuzugreifen.

würde ich schreiben wie so (für jedes Element):

html:

<li class="alpha-init" id="a-init"> 
<div>A</div> 
<ul id="a-sub" class="alpha-popdown"> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
</ul> 
</li> 

Und dann die jquery schreiben wie:

$('li.alpha-init').click(function(){ 
    $(this).children('ul.alpha-popdown').slideToggle(200); 
} 

Die Grundidee wäre zu verwenden die Methode $ (this), um auf das Element zuzugreifen, auf das geklickt wurde, und wählen Sie Ihr Menüelement relativ zum übergeordneten Element aus.

Answer 4

Ich habe eine Kombination aus Artem Barger und John Sheehan Code verwendet. Vielen Dank für Ihre Hilfe. jetzt schlafe ich ein!