Получение CSS аккордеонного вопроса с использованием Angular8 - PullRequest
Новая
       36

Получение CSS аккордеонного вопроса с использованием Angular8

0 голосов
/ 17 апреля 2020

У меня возникает проблема CSS, связанная с аккордеоном, при использовании Angular8 для моего приложения. Я объясняю мой код ниже. 

<li class="sub-menu" *ngIf="masterFlag==true">
                        <a href="javascript:;">
                            <i class="fa fa-align-justify"></i>
                            <span>Store Setup</span>
                        </a>
                        <ul class="sub">
                            <!-- <li><a [routerLink]="'/stores'">Stores</a></li>                             -->
                            <li *ngIf="storeFlag==true && customerFlag==true"><a [routerLink]="'/customers/customerStoreMapping'">Customer Store Mapping</a></li>
                            <li *ngIf="storeFlag==true"><a [routerLink]="'/products/store-mapping'">Store Products Mapping</a></li>
                            <li *ngIf="storeFlag==true && this.couponFlag==true && this.discountFlag==true"><a [routerLink]="'/stores/storePromotion'">Store Promotion</a></li>
                        </ul>
                    </li>

                    <li class="sub-menu" *ngIf="storeFlag==true">
                        <a href="javascript:;">
                            <i class="fa fa-align-justify"></i>
                            <span>Masters Setup</span>
                        </a>
                        <ul class="sub">
                            <li *ngIf="storeFlag==true"><a [routerLink]="'/stores'">Stores</a></li>
                            <li *ngIf="productFlag==true"><a [routerLink]="'/products'">Products</a></li>
                            <li *ngIf="customerFlag==true"><a [routerLink]="'/customers'">Customers</a></li>
                            <li *ngIf="customerFlag==true"><a [routerLink]="'/customers/customergroup'">Customer Group</a></li>                            
                            <li *ngIf="customerFlag==true"><a [routerLink]="'/customers/customerGroupMapping'">Customer Group Mapping</a></li>                            
                            <li *ngIf="couponFlag==true"><a [routerLink]="'/coupon'">Coupons</a></li>
                            <li *ngIf="discountFlag==true"><a [routerLink]="'/discount'">Discounts</a></li>
                        </ul>
                    </li>

мой файл машинописи приведен ниже. 

ngOnInit() {   
    $(document).ready(() => {   
      if ((<any>$.fn).dcAccordion) {
        (<any>$('#nav-accordion')).dcAccordion({
          eventType: 'click',
          autoClose: true,
          saveState: true,
          disableLink: true,
          speed: 'slow',
          showCount: false,
          autoExpand: true,
          classExpand: 'dcjq-current-parent'
        });
      }
    })
  }

Здесь я использую некоторые флаги для скрытия / отображения меню. Если флаг установлен, все меню должны отображаться. Когда я нажимаю на Store подменю внутри Masters Setup, меню Store setup также расширяется, что является моей проблемой, и оно работало, как и ожидалось, до добавления флагов. Здесь мне нужно, если пользователь нажимает на одно подменю, только его родительская часть меню будет расширяться, а остальные останутся закрытыми.

...