Benutzerdefiniertes Akkordeon - jeweils verwenden

Question

Ich versuche, ein benutzerdefiniertes Akkordeon für meine Seite zu erstellen, um meine Beiträge anzuzeigen. Ich habe es im Listenformat mit HTML und versuche, einen Effekt zu erstellen, wenn Sie auf jeden Header klicken, um zu erweitern, um weitere Informationen anzuzeigen.

Aber ich möchte nicht sechs Codeblöcke für sechs sagen <li> Elemente, die ich auf der Seite habe.

Gibt es eine Möglichkeit, es durch zu durchlaufen (); vielleicht? Anstatt jeden Abschnitt zu erstellen? Versuchen Sie einen dynamischeren Ansatz.

Answer 1

Hast du einen Blick darauf angesehen? Dieses Tutorial ?

Weil wie das Beispiel zeigt, Man braucht nicht mehrere Bedingungen, um dies zu erreichen.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
  //hide the all of the element with class msg_body
  $(".msg_body").hide();
  //toggle the componenet with class msg_body
  $(".msg_head").click(function()
  {
    $(this).next(".msg_body").slideToggle(600);
  });
});
</script>

Das gesamte Element mit dem Klassennamen "msg_body" wird zusammengebrochen, wenn die Seite geladen wird.

Die Funktion „Slidetoggle ()“ von JQuery wird verwendet, um die „DIV“ mit der Klasse „MSG_BODY“ zu erweitern und zusammenzubrechen.

Wenn der Benutzer mit der Klasse ".msg_head" auf das Element klickt, wird Div mit der Klasse "msg_body" daneben mit einem Schiebereffekt umgeschaltet, wodurch das Panel mit JQuery umgeschaltet wird.

Answer 2

Überprüfen Sie dies auch ziemlich einfache Demo: http://demos.pankaj.pro/jquery-tutorial-guide-build-a-simple-accordion/

Codehttp://time2hack.com/2013/01/jquery-tutorial-guide-build-a-custom-and-simple-accordion.html