TypeScript /Angular - Rozwijane menu - Forum Pasja Informatyki

pytanie zadane 8 sierpnia 2017 w JavaScript przez Perkos Początkujący (290 p.)
zamknięte 30 października 2017 przez Perkos

Witam,

Jeśli są osoby na tym forum które orientują się w temacie proszę o pomoc. Próbuje stworzyć menu rozwijane, w pewien sposób działam. Mam problem jak zaimplementować, żeby po ponownym naciśnięciu przycisku menu się zwineło.

Kod HTML

  
<!-- Left Menu -->
  <div class="row">
  <div class="col-md-2">
    <div class="panel-group">
      <div class="panel panel-default">
         <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse"  (click)="onSelect('collapse1')" style="display:block; cursor: pointer;"><span class="glyphicon glyphicon-cutlery"></span>&nbsp; Cuisines <span class="glyphicon glyphicon-menu-down" style="float:right;"></span></a>
          </h4>
        </div> 
        <div id="collapse1"  class="panel-collapse collapse in" *ngIf="loadedfeature === 'collapse1'">
          <ul class="list-group">
            <li class="list-group-item" *ngFor="let cuisine of cuisines">{{ cuisine }} </li>
          </ul>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" style="display:block; cursor: pointer;" (click)="onSelect('collapse2')"><span class="glyphicon glyphicon-star"></span>&nbsp; Review Score <span class="glyphicon glyphicon-menu-down" style="float:right;"></span></a>
          </h4>
        </div>
         <div id="collapse1"  class="panel-collapse collapse in" *ngIf="loadedfeature === 'collapse2'">
          <ul class="list-group">
            <li class="list-group-item" *ngFor="let cuisine of cuisines">{{ cuisine }} </li>
          </ul>
        </div>   
      </div>
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" style="display:block; cursor: pointer;" (click)="onSelect('collapse3')"><span class="glyphicon glyphicon-usd"></span>&nbsp; Price Range <span class="glyphicon glyphicon-menu-down" style="float:right;"></span></a>
          </h4>
        </div>
          <div id="collapse1"  class="panel-collapse collapse in" *ngIf="loadedfeature === 'collapse3'">
          <ul class="list-group">
            <li class="list-group-item" *ngFor="let cuisine of cuisines">{{ cuisine }} </li>
          </ul>
        </div>
        
      </div>
    </div>
  </div>
<!--End Left Menu -->

TypeScript


import { Component } from '@angular/core';

@Component({
  selector: 'app-restaurant-list',
  templateUrl: './restaurant-list.component.html',
  styleUrls: ['./restaurant-list.component.css']
})
export class RestaurantListComponent {
  cuisines = ['Polish', 'Italy', 'Grecce', 'Russia'];
  isOpen = false;
  loadedfeature = '';
  feature = '';

  onSelect(feature: string) {
    if (this.isOpen = true) {
      this.loadedfeature = feature;
      console.log(this.loadedfeature);
    } else {
      this.loadedfeature = '';
    }

  }

}

komentarz zamknięcia: Problem

Pokaż 8 poprzednich komentarzy

komentarz 9 sierpnia 2017 przez zgrybus Pasjonat (24,860 p.)

No jest wiele sposobów. Najprostszy to chyba taki, że ustawiasz jakąs zmienna np.

toggleMenu: boolean = false;

a w tej liście dajesz

<li [ngClass]="'showMenu': toggleMenu"></li>

a dla kliknięcia w button dajesz <button (click)="toggleMenu = !toggleMenu">

oczywiście klasę stylujesz w cssie :)

komentarz 9 sierpnia 2017 przez Perkos Początkujący (290 p.)

Ten sposób działa, ale jak użyje go do 3 przyciskiów to wszystkie na raz się otwierają i zamykają. Jest inny sposób niż tworzenie osobnych zmiennych dla każdego przycisku?

komentarz 9 sierpnia 2017 przez zgrybus Pasjonat (24,860 p.)

mogę wiedzieć czemu chcesz robić to na buttonach? Nie lepiej po prostu rozwijać menu po kliknięciu w dany element listy?

komentarz 9 sierpnia 2017 przez Perkos Początkujący (290 p.)

Może lepiej, ale czy to coś zmieni odnośnie użytej funkcji? Dalej będzie rozwijane menu (zdjęcie jak wygląda to obecnie) i dalej będę musiał użyć 3 zmiennych dla każdego przycisku inna. Chyba, że w przypadku listy można zastosować nowe rozwiązanie. Po prostu zastanawiam się czy jest możliwość zrobienia tego prościej.

1	komentarz 10 sierpnia 2017 przez zgrybus Pasjonat (24,860 p.) https://stackoverflow.com/questions/37891752/angular2-add-class-to-item-on-click Coś a'la to :P Obie są poprawne, ale w twoim przypadku chyba lepiej użyć odpowiedzi drugiej. Zamiast renderer użyj obiektu renderer2 ( nowy :P )