Question

我有一个方案，其中第一行显示一个人1和一个图标。单击“添加人”按钮后，第二行中将添加人2和图标，依此类推。当我单击图标时，我使用ul元素显示元素列表。不管我单击哪行，问题ul始终显示在第一行位置。 ul应该显示在单击该图标的特定行上。在这方面的任何帮助表示赞赏。我已在下面提供了代码。

 <div *ngFor="let person of persons; let i = index ">
      <div>
         <input id="form3" class="form-control" type="text">
         <label for="form3" class="">{{person.name}}</label>
      </div>

      <a href='#'  data-target='dropdown2' (click)="shareIconClicked($event, i)"></a> //icon to click

       // on click of above link , below li gets displayed
       <ul id='dropdown2' *ngIf="i<1" [ngClass]="{'popupShare': showPopup == true}" class='dropdown-content sharebtn-content'>
            <li>List item 1</li>
            <li>List item 2 </li>        
       </ul>
  </div>

 <button (click)="addNewRow()">Add Person</button>


// component code
ngOnInit() {
    this.showPopup = false;
    this.persons = [
      { 'name': 'Person 1' }
    ];

  }
 addNewRow() {
    this.persons.push({ 'name': 'Person ' + (this.persons.length + 1) });
  }


shareIconClicked($event: Event, i) {
    this.showPopup = true;
    $event.preventDefault();
    $event.stopPropagation();
  }


.popupShare {
    display: block;
    width: 180px;
    left: 198.594px;
    top: 16px;
    height: 153px;
    transform-origin: 0px 0px 0px;
    opacity: 1;
    transform: scaleX(1) scaleY(1);
}

.dropdown-content {
    background-color: #fff;
    margin: 0;
    display: none;
    min-width: 100px;
    opacity: 0;
    position: absolute;
    top: 0;
    z-index: 9999;
    transform-origin: 0 0;
    }
.sharebtn-content {
    width: 180px !important;
    left: 47.15px !important;
}

Answer 1

您可以使用HTML DOM --nocapture属性的.toggle()方法来添加/删除CSS类

请注意，classList已添加到#listItem

ul

应该定义一个CSS类：

<a href='#'  data-target='dropdown2' (click)="listItem.classList.toggle('hidden')"></a> 

// on click of above link , below li gets displayed
<ul id='dropdown2 hidden' #listItem>
   ...    
</ul>

Answer 2

我们需要有关CSS和位置的更多信息，->如果我正确理解，您希望在行中弹出类似于操作菜单的图标。我想您的位置是绝对的还是固定的，请提供以下CSS：popupShare，dropdown-content，sharebtn-content

根据显示的内容，我只能确保确保ul具有相对位置或未定义任何位置，而不是确保ul将以html语义显示在行内，这也是jsfiddle上的示例很好。

-添加CSS样式后进行编辑-

一种解决方案或好的方法可能是将整个ul-li下拉菜单放入组件中的变量中，然后将其动态添加到单击的行中。然后，您只需要根据图标位置将其水平放置即可，但这就是大多数此类插件的工作方式。

如何在单击元素的同一行上显示HTML元素

2 个答案: