Wie kann ich zum Zusammenklappen wechseln?

Question

Ich habe eine funktionierende Toggle-Funktion, die erweitert und minimiert wird, aber meine Liste ist beim Erweitern sehr lang und ich wollte einen "Schließen" -Link am unteren Rand einfügen, damit meine Benutzer nicht nach oben scrollen müssen, um zu klicken und Zusammenbruch. Irgendwelche Ideen, wie ich diesen Code ändern kann, um seine Funktionalität für meine Zwecke zu erweitern?

<script language="javascript"> 
$(function(){ 
$(".formname").toggle(function(){ 
var id=$(this).attr('id'); 
$("#form"+id).fadeIn('slow'); 
},function(){ 
var id=$(this).attr('id'); 
$("#form"+id).fadeOut('slow'); 
}); 
}); 
</script> 

mein html wie folgt aussieht:

<ul> 
<li><a href="#" id="formxyz" class="formname">My Expanding/Collapsing Data</a></li> 
<div style="display:none;"> 
<ul> 
<li>Content</li> 
</ul> 
</div> 
</ul> 

wenn ich den gleichen Link li am Boden vor dem Schließen ul Benutzer einfügen hat es zweimal klicken zusammenzubrechen. Ich würde eine Einzelklicklösung bevorzugen.

<ul> 
<li><a href="#" id="formxyz" class="formname">My Expanding/Collapsing Data</a></li> 
<div style="display:none;"> 
<ul> 
<li>Content</li> 
<li><a href="#" id="formxyz" class="formname">Close</a></li> 
</ul> 
</div> 
</ul> 

Answer 1

Wenn Sie das Ereignis toggle() auf formxyz verwenden, bricht die neue Aktion zum Schließen die ursprüngliche Regel, daher müssen Sie manchmal zweimal auf formxyz klicken, um den Inhalt anzuzeigen.

Verwenden Sie also click() Ereignis mit fadeToggle() Aktion auf Formxyz. Es wird Inhalte anzeigen, während es sich versteckt.

Dann fügen Sie eine Klasse für alle "schließen", verwenden Sie parents Methode, um es Eltern div zu finden (es sollte der Inhalt Div sein), dann verstecken Sie es.

Die html:

<div style="background-color: gray"> 
    <li><a href="#" id="xyz" class="formname">My Expanding/Collapsing Data</a></li> 
    <div id="formxyz" class="content" style="display:none"> 
    <ul> 
     <li>Content</li> 
     <li><a href="#" class="closeform">Close</a></li> 
    </ul> 
    </div>​ 
</div> 

Die js-Datei:

$(function(){ 
    $(".formname").click(function(){ 
    var id=$(this).attr('id'); 
    $("#form"+id).fadeToggle('slow').focus(); 
    }); 

    $(".closeform").click(function(){ 
    $(this).parents("div.content").fadeOut('slow'); 
    }); 
}); 

OR Preiscode auf jsFiddle emulieren. Es ist ausführbar.

Answer 2

<li><a href="#" id="xyz" class="formname">My Expanding/Collapsing Data</a></li> 
<div style="display:none;"> 
<ul> 
<li>Content</li> 
<li><a href="#" id="xyz2" class="formname">Close</a></li> 
</ul> 
</div> 

Eine ID soll für ein einzelnes Element verwendet werden. Verwenden Sie niemals dieselbe ID für mehr Elemente.