Sidebar Akkordeon Zustand und Symbolzustand

Question

Ich habe eine vertikale Akkordeon Menü Sidebar erstellt. mit jedem Akkordeon wie dies geht:

icon - Name - Symbol

<!-- for collapse state add 'very thin' to the sidebar class --> 
<div class="ui vertical sidebar menu left overlay visible"> 
    <a class="item logo">title</a> 
    <div class="ui vertical fluid inverted accordion menu"> 
    <div class="item"> 
     <a class="title"> 
     <i class="big home icon left"></i> 
     <i class="dropdown icon"></i> 
     Size 
     </a> 
     <div class="content"> 
     Content 
     </div> 
    </div> 
    </div> 
</div> 

Pfeil Ich will ein Admin-Typ Sidebar erstellen, auf Maus schweben sie das Akkordeon zeigen, dehnt sich aus, im normalen Zustand zeigt es nur die Symbole.

Ich würde gerne wissen, wie Sie den Text aus der Seitenleiste entfernen, wenn es Kollapsmodus ist.

Answer 1

ein Div um das Label hinzufügen und es zu einem einzigartigen classname geben. Beispiel:

<div class="label">Size</div> 

In Ihrem Stylesheet verweisen Sie entsprechend auf die übergeordneten/untergeordneten Elemente. Etwas wie dieses:

.ui.vertical.sidebar.menu.left.overlay.visible .label{ 
     display: block; 
    } 

    .ui.vertical.sidebar.menu.left.overlay.hidden .label{ 
     display: none; 
    }