单击时关闭的可悬停下拉菜单

Question

I have 3 drop-down menus I display them using *ngFor in angular+2 but I'm having a problem of setting all these to close on item click

Without close on click

HTML Code

<div *ngFor="let filter of Filters ; let i = index">
  <span class="dropdown">
    <span class="filter">
      {{ currentFilter[i] }}
    </span>
    <div class="dropdown-content">
      <div class="item" *ngFor="let filterType of filter" (click)="
        currentFilter[i] = filterType;
        onFilter();
      ">
        {{ filterType }}
      </div>
    </div>
  </span>
</div>

CSS

.dropdown-content {
  padding: 8PX;
  display: none;
  position: absolute;
  background-color: #ffffff;
  z-index: 1;
  border-radius: 8px;
  box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.26);
  width: 100%;
  font-size: 14px;
  font-weight: 900;
  .item {
    position: relative;
    background-color: Transparent;
    padding: 12px;
    font-size: 16px;
    font-weight: 500;
  }
  .item:hover{
    background-color: #e7eaeb;
    border-left: 3px solid red;
    font-weight: 900;
  }
}
.dropdown:hover 
.dropdown-content {
  display: block ;
}

ts

currentFilter: Array<string> = ['ALL', 'ALL', 'ALL', 'ALL'];
Filters : Array<Array<string>> = [
  // offers_type =
  [
    'ALL',
    'DISCOUNT',
    'FREE_DELIVERY',
    'FREE_ITEMS',
  ],

  // activity =
  [
    'ALL',
    'ACTIVE_WITH_IN_TIME',
    'ACTIVE_OUT_OF_TIME',
    'NOT_STARTED',
    'ENDED',
  ],
  // visibility =
  ['ALL', 'VISIBLE', 'HIDDEN'],
];

I Tried to target dropdown-content by id and change the style on click and on hover but this did't work fine with multiple dropdowns in *ngFor

Here is what I tried

With close on click

<div *ngFor="let filter of Filters ; let i = index">
  <span class="dropdown">
    <span 
      id=i
      class="filter">
      {{ currentFilter[i] }}
    </span>
    <div class="dropdown-content"
         onmouseover="document.getElementById(i).style.display='block';"
     >
      <div class="item" 
        *ngFor="let filterType of filter" 
        (click)="
        currentFilter[i] = filterType;
        onFilter();"
        onClick="document.getElementById(i).style.display='none';"
      >
        {{ filterType }}
      </div>
    </div>
  </span>
</div>

But I'm keeping get this error

Uncaught TypeError: Cannot read property 'style' of null
    at HTMLDivElement.onmouseover

Uncaught TypeError: Cannot read property 'style' of null
    at HTMLDivElement.onclick 

Note that this code is working fine when targeting a single dropdown with fixed id

edited:

adding ngFor div

Answer 1

With the error that you are getting, I can see that you have an error in your code.

You have written the following code:

<div class="dropdown-content" onmouseover="document.getElementById(i).style.display='block';">

JavaScript would treat i as a variable, since it is not written as text. You should use apostrophes with i :

<div class="dropdown-content" onmouseover="document.getElementById('i').style.display='block';">

Answer 2

I have fixed this issue using the edited code bellow in ts file

  onMouseOver(i){
    document.getElementById(`dropdown-content-${i}`).style.display='block';
  }
  onClick(i){
    document.getElementById(`dropdown-content-${i}`).style.display='none';
  }

in HTML file

    <div *ngFor="let filter of Filters ; let i = index">
      <div>
        <span class="filter-label">
          {{ FiltersLabels[i] | translate }}
        </span>

        <span class="dropdown">
          <span 
            class="filter"
            (mouseover)='onMouseOver(i)'>
            {{ currentFilter[i] }}
          </span>
          <div
            id='item-{{i}}'
            class="dropdown-content"
          >
            <div class="item" 
             *ngFor="let filterType of filter" 
              (click)="
              currentFilter[i] = filterType;
              onFilter();
              onClick(i)
            ">
              {{ filterType }}
            </div>
          </div>
        </span>
      </div>
    </div>

But I still don't know why this worked