Wie toggle list Elemente mit AngularJS und CSS

Question

Ich versuche, ein anklickbares Dropdown-Menü zu erstellen. Ich verwende meine eigene AngularJS-Anweisung, um das Dropdown-Menü zu erstellen und die Menüelemente dynamisch zu laden.

Ich bin weit gekommen, aber jetzt habe ich nur ein kleines Problem .. Ich kann kein CSS (3) finden nur eine Möglichkeit, eine Animation für das Herunterfallen ul 's zu machen.

Was ich habe:

Der Code für die Drop-Down-Funktion:

private CreateDirective(): any { 
     return { 
      restirct: 'E', 
      scope: { 
       dataset: '=' 
      }, 
      templateUrl: 'App/Templates/LeftBar/index.html', 
      controller: function ($scope) { 
       $scope.Select = Select; 

       var SelectedItem; 

       function Select(MenuItem: any): any { 

        if (SelectedItem != null) { 
         SelectedItem.selected = false; 
        } 

        if (MenuItem.open) { 
         MenuItem.selected = true; 
         MenuItem.open = false; 
         return; 
        } 

        if (MenuItem.childs && MenuItem.childs.length > 0) { 
         MenuItem.open = true; 
        } 

        MenuItem.selected = true; 
        SelectedItem = MenuItem; 
       } 
      } 
     } 
    } 

Kennt jemand vielleicht ein Ersatz von jQuery slideToggle oder eine Art und Weise jQuery zu verwenden slideToggle in meiner Direktive?

Vielen Dank im Voraus!

Answer 1

Sie können dies mit einfachem CSS + Hilfe von angular tun, um ng-Klasse Toggeln zu ermöglichen.

CSS

.container { 
    width: 50px; // your widget width 
    overflow: hidden; 
} 

.content { 
    margin-top: 0; 
    -webkit-transition:all .3s ease; 
    -moz-transition:all .3s ease; 
    -o-transition:all .3s ease; 
    transition:all .3s ease; 
} 
.container.collapsed .content { 
    margin-top: -100%; 
} 

HTML

<ul> 
    <li class="container" ng-class="{'collapsed':!item.open}"> 
    <ul class="content"> 
     <li>...</li> 
     ... 
    </ul> 
    </li> 
    ... 
</ul> 

Grundsätzlich verbirgt diese UL hinter Mutter LI. Indem Sie den negativen Rand setzen, fahren Sie UL vom Elternblock weg, wodurch die Größe des Elternteils automatisch reduziert wird.

Answer 2

Sie können es mit nur CSS animieren, wenn Sie die max-height animieren:

var button = document.getElementById('nav'); 
 
button.onclick = function(e) { 
 
    var target = e.target; 
 
    if (e.target.tagName !== 'SPAN') return; 
 
    target = target.nextSibling.nextSibling; 
 
    if (target.className === 'open') { 
 
    target.className = ''; 
 
    } else { 
 
    target.className = 'open'; 
 
    } 
 
};

ul { 
 
    display: block; 
 
    transition:all 0.5s ease; 
 
} 
 

 
ul ul { 
 
    max-height: 0; 
 
    overflow: hidden; 
 
} 
 

 
ul#nav1.open { 
 
    max-height: 50px; 
 
} 
 
ul#nav2.open { 
 
    max-height: 100px; 
 
} 
 
ul#nav3.open { 
 
    max-height: 150px; 
 
} 
 

 
ul span { 
 
    cursor: pointer; 
 
}

<ul id="nav"> 
 
    <li> 
 
    <span>Title 1</span> 
 
    <ul id="nav1"> 
 
     <li>one</li> 
 
     <li>two</li> 
 
    </ul> 
 
    </li> 
 
    <li> 
 
    <span>Title 2</span> 
 
    <ul id="nav2"> 
 
     <li>three</li> 
 
     <li>four</li> 
 
     <li>five</li> 
 
     <li>six</li> 
 
    </ul> 
 
    </li> 
 
    <li> 
 
    <span>Title 3</span> 
 
    <ul id="nav3"> 
 
     <li>seven</li> 
 
     <li>eight</li> 
 
     <li>nine</li> 
 
     <li>ten</li> 
 
     <li>eleven</li> 
 
     <li>twelve</li> 
 
    </ul> 
 
    </li> 
 
</ul>

Bitte beachte, dass ich max-height statt height so bin mit, dass Sie sich keine Sorgen machen über kleine Pixelunterschiede zwischen Browsern - aber Sie müssen verschiedene Höhen für jede nav Option festlegen, wenn Sie es richtig animieren möchten.