Wie erstelle ich einen zusammenklappbaren Ordner?

Problem: Ich möchte einen Ordner erstellen, der mehrere Ordner enthält. Ich bin jedoch nicht in der Lage, es richtig zu machen.Wie erstelle ich einen zusammenklappbaren Ordner?

Ich möchte den Unterordner öffnen, um den Rest des Inhalts nach unten zu schieben. Außerdem fällt es mir schwer, den Text an das Bild anzupassen.

Folgendes habe ich getan.

.dropdown { 
 
    /*position: relative; 
 
    */display: inline-block; 
 
} 
 

 
.dropdown2{ 
 
    /*position: relative; 
 
    */display: inline-block; 
 
} 
 

 
.dropdown3 { 
 
    /*position: relative; 
 
    */display: inline-block; 
 
} 
 

 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #f9f9f9; 
 
    min-width: 200px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
 
    padding: 12px 16px; 
 
} 
 

 
.dropdown-content2 { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #f9f9f9; 
 
    min-width: 200px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
 
    padding: 12px 16px; 
 
} 
 

 
.dropdown-content3 { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #f9f9f9; 
 
    min-width: 357px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
 
    padding: 12px 16px; 
 
} 
 

 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
} 
 

 
.dropdown3:hover .dropdown-content3 { 
 
    display: block; 
 
} 
 

 
.dropdown2:hover .dropdown-content2 { 
 
    display: block; 
 
}

<td style="font-size:12px; vertical-align:center"> 
 
\t \t \t \t \t <div class="dropdown"> 
 
\t \t \t \t \t \t <span style="color:#4284b0;">Controlled Substance Forms</span> 
 
\t \t \t \t \t \t <div class="dropdown-content"> 
 
\t \t \t \t \t \t \t <div class="dropdown2"> 
 
\t \t \t \t \t \t \t \t <div><img style="width:40px" src="images/Files-icon24.png" alt="Description of Quality Measures" class="float-left"/ > 
 
\t \t \t \t \t \t \t \t <span style="color:#4284b0; vertical-align:center">Controlled Substance Forms</span></div> \t 
 
\t \t \t \t \t \t \t \t \t <div class="dropdown-content2"> \t 
 
\t \t \t \t \t \t \t \t \t \t <p><a href="Downloads/PhyDownloads/Controlled Substances Prescribing Policy 02-07-2017.docx" target="_blank">Controlled Substances Prescribing Policy</a></p> 
 
\t \t \t \t \t \t \t \t \t \t <p><a href="Downloads/PhyDownloads/Controlled Substance Treatment Agreement 02-07-2017.docx" target="_blank">Controlled Substance Treatment Agreement</a></p> 
 
\t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <p><a href="Downloads/PhyDownloads/HGH Treatment Agreement 02-07-2017.docx" target="_blank">HGH Treatment Agreement</a></p> 
 
\t \t \t \t \t \t \t <p><a href="Downloads/PhyDownloads/Appendix A. Opioid Risk Tool.pdf" target="_blank">Appendix A. Opioid Risk Tool</a></p> 
 
\t \t \t \t \t \t \t <p><a href="Downloads/PhyDownloads/Appendix B. PADT.pdf" target="_blank">Appendix B. PADT</a></p> 
 
\t \t \t \t \t \t \t <p><a href="Downloads/PhyDownloads/Testosterone Treatment Agreement 02-07-2017.docx" target="_blank">Testosterone Treatment Agreement</a></p> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </td> \t

IE:

Chrome:

Quelle

2017-02-10 Roberto Flores

Um dies zu erreichen, was Sie wollen Sie diese Zeile aus der CSS des dropdown-content2 entfernen müssen :

position: absolute;

Was

ich eine harte Zeit, um den Text mit dem Bild auszurichten habe.

Ich kann nicht verstehen, was Sie wollen.

Sie können testen, was ich in diesem JSFiddle gesagt habe. Sie können einen Screenshot erstellen und erklären, wie das Bild angezeigt werden soll.

Quelle

2017-02-10 23:57:43 Thanasis

@ Thanasis: Ich bin nicht in der Lage zu haben, was Sie auf dem JSFiddle auf IE sehen. Ich habe ein Bild an, was ich sehe –

Ok, ich weiß nicht, was das Problem genau ist. Sie können hier nach Hilfe suchen: http://stackoverflow.com/questions/531048/ie-css-alignment-issues – Thanasis

@ Thanasis: Gibt es eine Möglichkeit, den Ordner ansprechbar zu machen, wo sich der Ordner je nach Schnitt nach oben oder unten bewegt Aus-Punkt? –

Wie erstelle ich einen zusammenklappbaren Ordner?

Antwort

Verwandte Themen