|
|||
Div in einen Li element einbauen
Hallo,
ich arbeite gerade an einen Projekt und ich habe einen Problem und weiss nicht wie ich weiter machen soll, deshalb die Frage: Ich habe einen div mit eine Liste und 6 Elemente in der Liste. alle Elemente sind horizontal eingeordnet. ich würde gern wenn man auf einen Element der Liste klickt einen versteckten div "toggle" darunter von diesen Div. und so hat jeden Li Element seinen eigenen Div. Ich habe das auch geschafft indem ich einfach alle divs nach dem ersten div eingebaut habe, aber für die mobile Ansicht kommt diese Lösung nicht im Frage... ich würde jetzt wissen ob es einen Weg gibt die divs unten den jeweiligen li's einzubauen so dass die darunter liegende Divs an der Gleiche Stelle erscheinen und nicht verschoben.... ich habe zwei Bilder Hochgeladen die zeigen genau wo die Problematik liegt. Sorry wegen mein Deutsch, bin immer noch am Lernen. Gruss Alva |
Sponsored Links |
|
|||
Hallo
Ich verstehe leider nur halbwegs was du möchtest. Zunächst solltest du dich davon lösen Elemente vorzugeben. Das erschwert nur das Finden einer Lösung. Du hast 6 nebeneinander liegende Elemente. Welchen Inhalt haben die? Am besten zwei, drei konkrete Beispiele. Wenn die angeklickt werden soll unterhalb weiterer Inhalt angezeigt werden. Was ist das für ein Inhalt? Bilder? Texte? Mehrere Beispiele bitte. Dieser Inhalt soll mehr oder weniger auf der gleichen Fläche entstehen? Mit den Informationen würde ich dir den Checkbox-Hack empfehlen. Ansonsten bliebe wohl nur eine Lösung mit JavaScript. Mit all den Nachteilen, die JavaScript mit sich bringt. Stichworte: Akkordeon oder accordeon. Gruss MrMurphy |
Sponsored Links |
|
|||
Am besten wäre dein Code oder ein Link zur Seite oder zu einer Seite, die dein Problem veranschaulicht.
Jedes toggle-Script funktioniert nämlich anders, was bedeutet, dass mit unterschiedlichem HTML-Aufbau gearbeitet wird. Um die divs aber immer genau unter dem zugehörigen <li> zu positionieren, wäre folgender Aufbau geeignet: HTML-Code:
<ul> <li>Listenpunkt 1 <div>Montag</div></li> <li>Listenpunkt 2 <div>Dienstag</div></li> <li>Listenpunkt 2 <div>Mittwoch</div></li> </ul> |
|
|||
Unten ist mein Html code,
Ich würde gern wissen ob das was ich versuche zu machen überhaupt machbar ist oder nicht... gruss HTML-Code:
<div class="row" id="clubAuswahl"> <ul class="portfolio-list sort-destination" data-sort-id="portfolio"> <li class="col-md-1-5 isotope-item brands" data-iddiv="clubOneDays"> <div class="portfolio-item"> <span class="thumb-info"> <span class="thumb-info-wrapper"> <img src="img/projects/project.jpg" class="img-responsive" alt=""> </span> </span> </div> <div class="containerDays" id="clubOneDays" style="display:none"> <hr> <div class="col-md-12"> <div class="row"> <ul class="portfolio-list"> <li class="col-md-2 col-sm-6 col-xs-12" data-iddiv="ticketsClubOneDayOne"> <div class="portfolio-item"> <span class="thumb-info thumb-info-lighten"> <span class="thumb-info-wrapper"> <img src="img/projects/project.jpg" class="img-responsive" alt=""> <span class="thumb-info-title"> <span class="thumb-info-inner">Montag1</span> </span> </span> </span> </div> </li> <li class="col-md-2 col-sm-6 col-xs-12" data-iddiv="ticketsClubOneDayTwo"> <div class="portfolio-item"> <span class="thumb-info thumb-info-lighten"> <span class="thumb-info-wrapper"> <img src="img/projects/project-2.jpg" class="img-responsive" alt=""> <span class="thumb-info-title"> <span class="thumb-info-inner">Dienstag1</span> </span> </span> </span> </div> </li> <li class="col-md-2 col-sm-6 col-xs-12" data-iddiv="ticketsClubOneDayThree"> <div class="portfolio-item"> <span class="thumb-info thumb-info-lighten"> <span class="thumb-info-wrapper"> <img src="img/projects/project-2.jpg" class="img-responsive" alt=""> <span class="thumb-info-title"> <span class="thumb-info-inner">Mittwoch1</span> </span> </span> </span> </div> </li> <li class="col-md-2 col-sm-6 col-xs-12" data-iddiv="ticketsClubOneDayFour"> <div class="portfolio-item"> <span class="thumb-info thumb-info-lighten"> <span class="thumb-info-wrapper"> <img src="img/projects/project-2.jpg" class="img-responsive" alt=""> <span class="thumb-info-title"> <span class="thumb-info-inner">Donnerstag1</span> </span> </span> </span> </div> </li> <li class="col-md-2 col-sm-6 col-xs-12" data-iddiv="ticketsClubOneDayFive"> <div class="portfolio-item"> <span class="thumb-info thumb-info-lighten"> <span class="thumb-info-wrapper"> <img src="img/projects/project-2.jpg" class="img-responsive" alt=""> <span class="thumb-info-title"> <span class="thumb-info-inner">Freitag1</span> </span> </span> </span> </div> </li> <li class="col-md-2 col-sm-6 col-xs-12" data-iddiv="ticketsClubOneDaySix"> <div class="portfolio-item"> <span class="thumb-info thumb-info-lighten"> <span class="thumb-info-wrapper"> <img src="img/projects/project-3.jpg" class="img-responsive" alt=""> <span class="thumb-info-title"> <span class="thumb-info-inner">Samstag1</span> </span> </span> </span> </div> </li> <li class="col-md-2 col-sm-6 col-xs-12" data-iddiv="ticketsClubOneDaySeven"> <div class="portfolio-item"> <span class="thumb-info thumb-info-lighten"> <span class="thumb-info-wrapper"> <img src="img/projects/project-4.jpg" class="img-responsive" alt=""> <span class="thumb-info-title"> <span class="thumb-info-inner">Sonntag1</span> </span> </span> </span> </div> </li> </ul> </div> </div> </li> <li class="col-md-1-5 isotope-item medias" data-iddiv="clubTwoDays"> <div class="portfolio-item"> <span class="thumb-info"> <span class="thumb-info-wrapper"> <img src="img/projects/project-1.jpg" class="img-responsive" alt=""> </span> </span> </div> <div class="containerDays" id="clubTwoDays" style="display:none"> <hr> <div class="col-md-12"> <div class="row"> <ul class="portfolio-list"> <li class="col-md-2 col-sm-6 col-xs-12" data-iddiv="ticketsClubTwoDayOne"> <div class="portfolio-item"> <span class="thumb-info thumb-info-lighten"> <span class="thumb-info-wrapper"> <img src="img/projects/project.jpg" class="img-responsive" alt=""> <span class="thumb-info-title"> <span class="thumb-info-inner">Montag2</span> </span> </span> </span> </div> </li> <li class="col-md-2 col-sm-6 col-xs-12" data-iddiv="ticketsClubTwoDayTwo"> <div class="portfolio-item"> <span class="thumb-info thumb-info-lighten"> <span class="thumb-info-wrapper"> <img src="img/projects/project-2.jpg" class="img-responsive" alt=""> <span class="thumb-info-title"> <span class="thumb-info-inner">Dienstag2</span> </span> </span> </span> </div> </li> <li class="col-md-2 col-sm-6 col-xs-12" data-iddiv="ticketsClubTwoDayThree"> <div class="portfolio-item"> <span class="thumb-info thumb-info-lighten"> <span class="thumb-info-wrapper"> <img src="img/projects/project-2.jpg" class="img-responsive" alt=""> <span class="thumb-info-title"> <span class="thumb-info-inner">Mittwoch2</span> </span> </span> </span> </div> </li> <li class="col-md-2 col-sm-6 col-xs-12" data-iddiv="ticketsClubTwoDayFour"> <div class="portfolio-item"> <span class="thumb-info thumb-info-lighten"> <span class="thumb-info-wrapper"> <img src="img/projects/project-2.jpg" class="img-responsive" alt=""> <span class="thumb-info-title"> <span class="thumb-info-inner">Donnerstag2</span> </span> </span> </span> </div> </li> <li class="col-md-2 col-sm-6 col-xs-12" data-iddiv="ticketsClubTwoDayFive"> <div class="portfolio-item"> <span class="thumb-info thumb-info-lighten"> <span class="thumb-info-wrapper"> <img src="img/projects/project-2.jpg" class="img-responsive" alt=""> <span class="thumb-info-title"> <span class="thumb-info-inner">Freitag2</span> </span> </span> </span> </div> </li> <li class="col-md-2 col-sm-6 col-xs-12" data-iddiv="ticketsClubTwoDaySix"> <div class="portfolio-item"> <span class="thumb-info thumb-info-lighten"> <span class="thumb-info-wrapper"> <img src="img/projects/project-3.jpg" class="img-responsive" alt=""> <span class="thumb-info-title"> <span class="thumb-info-inner">Samstag2</span> </span> </span> </span> </div> </li> <li class="col-md-2 col-sm-6 col-xs-12" data-iddiv="ticketsClubTwoDaySeven"> <div class="portfolio-item"> <span class="thumb-info thumb-info-lighten"> <span class="thumb-info-wrapper"> <img src="img/projects/project-4.jpg" class="img-responsive" alt=""> <span class="thumb-info-title"> <span class="thumb-info-inner">Sonntag2</span> </span> </span> </span> </div> </li> </ul> </div> </div> </div> </li> <li class="col-md-1-5 isotope-item logos" data-iddiv="clubThreeDays"> <div class="portfolio-item"> <span class="thumb-info"> <span class="thumb-info-wrapper"> <img src="img/projects/project-2.jpg" class="img-responsive" alt=""> </span> </span> </div> </li> <li class="col-md-1-5 isotope-item brands" data-iddiv="clubFourDays"> <div class="portfolio-item"> <span class="thumb-info"> <span class="thumb-info-wrapper"> <img src="img/projects/project-3.jpg" class="img-responsive" alt=""> </span> </span> </div> </li> <li class="col-md-1-5 isotope-item logos" data-iddiv="clubFiveDays"> <div class="portfolio-item"> <span class="thumb-info"> <span class="thumb-info-wrapper"> <img src="img/projects/project-4.jpg" class="img-responsive" alt=""> </span> </span> </div> </li> <li class="col-md-1-5 isotope-item logos" data-iddiv="clubSixDays"> <div class="portfolio-item"> <span class="thumb-info"> <span class="thumb-info-wrapper"> <img src="img/projects/project-4.jpg" class="img-responsive" alt=""> </span> </span> </div> </li> </ul> </div> |
|
|||
|
|
|||
Hallo
Im JSFiddle wird mir nur ein Punkt angezeigt. Mehr als Tagesnamen sind dem Quelltext auch nicht zu entnehmen. Außer dass du wahrscheinlich ein Framework verwendest. Leider hast du meine Fragen noch nicht beantwortet. Das ist wohl zielführender als der Quelltext um dein Problem überhaupt zu erkennen. Ich habe mal ein Beispiel erstellt, so wie ich dein Problem verstanden zu haben glaube: Testbeispiel Wobei zunächst versteckter Text grundsätzlich nicht besucherfreundlich ist. Gruss MrMurphy |
|
|||
Hi, So eine Lösungsansatz sieht sehr sehr gut aus, aber wenn ich die seite aufs Mobile Ansicht resize, werden alle texten ganz unten angezeigt, ich würde sie gern unten von den jeweiligen "labels anzuzeigen".... ist das überhaupt möglich?
Danke und Gruss |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Element in gefloatetem Div unten auf gleicher Höhe ausrichten | mimii | CSS | 8 | 07.11.2016 11:41 |
Kann Text nicht mittig in Listen Element (li) und Div ausrichten.. | Nargaroth | CSS | 1 | 06.09.2013 19:58 |
Header entfernen | tripple | CSS | 17 | 15.06.2010 16:41 |
Liste im IE | StarSt0rm | CSS | 3 | 22.08.2007 21:04 |
Die maximale breite wird nicht erkannt | notebook20000 | CSS | 9 | 22.06.2006 21:14 |