|
|||
Accordion, nicht alle li-Einträge werden dargestellt.
Hallo,
Ich schreibe gerade einen Texteditor. (PHP/HTML/CSS/JS) Für das Seitenlayout nehme ich bootstrap. Ein Akkordion, welches in der linken Spalte Listenelemente (Headlines) ausgibt mache ich jedoch nur mit HTML/CSS/JS, nehme als nicht das Bootstap Akkordion. Die erste Hürde ist die Überschriften und Unterüberschriften in der linken Spalte auszugeben, dazu lese ich die Daten von einer JSON Datei mit PHP. Jetzt habe ich aber ganz klar ein CSS-Darstellungsproblem: Das sehe ich daran, dass die .panel ul- Elemente unten offen sind (also der untere Rahmen fehlt). Weiss hier jemand einen Rat? vielen Dank. Linke Spalte im Bootstrap-Grid HTML-Code:
<div class="col-sm-4 sections-box"> <?php foreach ($obj as $key => $jsons) { foreach($jsons as $key => $value) { if($key == 'label'){ echo "<div class='accordion d-flex'><span class='mr-auto'>".$value."</span>"; echo "<button class='btn btn-success btn-sm mr-1'>+</button><button class='btn btn-danger btn-sm'>DEL</button></div>"; } if($key == 'items'){ echo "<div class='panel'><ul>"; foreach($value as $key => $val) { foreach($val as $k => $v) { if($k == 'label') { echo "<li><a>".$v."</a></li>"; } } } echo "</ul></div>"; } } } ?> </div> Code:
.sections-box { margin:0px; padding:0px; height:600px; width:100%; overflow:hidden; overflow-y:scroll; } div.accordion { background-color: #eee; color: #444; cursor: pointer; padding:18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.8s; } .active, .accordion:hover { background-color: #ccc; } /* div.accordion:after { content: '\25bc'; font-size: 13px; color: #777; float: right; margin-left: 5px; } div.accordion.active:after { /* content: "\25b2"; color: #FFF; }*/ .panel { padding: 0 18px; background-color: white; overflow: hidden; transition: 0.8s ease-in-out; opacity: 0; max-height:0; } .panel.show { opacity: 1; max-height: 500px; } .panel.hide { opacity: 0; height: 0; } /* headlines */ .panel { padding:0; } .panel ul { margin:0; padding:0; list-style-type: none; width:100%; border:1px solid red; } .panel ul li { padding:0; margin:0; } .panel ul li a { padding:15px; text-decoration:none; display:block; border:1px solid green; } .panel ul li a:hover { background-color:#3D4849; color:#ffffff !important; } Code:
$('.accordion').click(function() { var $this = $(this).toggleClass('active'); var $panel = $this.next().toggleClass('show'); // $('.accordion.active').not(this).removeClass('active').next().removeClass('show'); }); |
Sponsored Links |
|
|||
Sorry, ich poste es und dann sehe ich es:
Ich habe max-height bei .panel.show vergrössert, ist natürlich auch nicht ideal, da ich nicht weiss, wieviel Einträge ich schliesslich habe: Code:
.panel.show { opacity: 1; max-height:3000px; } |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Accordion / Felder Anordnung, Steuerung funktioniert nicht | Iago2 | Javascript & Ajax | 27 | 15.02.2020 15:03 |
Accordion soll automatisch öffnen | seerose | Javascript & Ajax | 2 | 24.05.2018 20:07 |
Accordion Problem Internet Explorer | beamwe | CSS | 3 | 30.11.2012 18:16 |
Accordion in Nav | Moby | Javascript & Ajax | 4 | 07.01.2011 08:40 |
css - Linie oben wird statt gepunktet gestrichelt dargestellt | Agnes | CSS | 2 | 19.11.2007 16:58 |