Как отобразить HTML-элемент в той же строке, по которой щелкает элемент javascript - PullRequest
Новая
       11

Как отобразить HTML-элемент в той же строке, по которой щелкает элемент javascript

0 голосов
/ 26 ноября 2018

У меня есть сценарий, в котором персона 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;
}

Ответы [ 2 ]

0 голосов
/ 26 ноября 2018

Нам нужна дополнительная информация о CSS и позиционировании, -> Если я правильно понимаю, вы хотите, чтобы значок, похожий на меню действий, всплывал в строке.Я полагаю, у вас есть какая-то позиция: абсолютная или фиксированная на этом ul, пожалуйста, предоставьте css of: popupShare, dropdown-content, sharebtn-content

Из показанного я могу только сказать, что убедитесь, чтоУ ul есть относительная позиция, или ни одна позиция не определена, поэтому убедитесь, что ul будет в html семантике внутри строки, также неплохо было бы привести пример с jsfiddle.-

Решением или хорошим подходом может быть помещение всего раскрывающегося меню ully в компонент в переменной, который вы динамически добавляете в строку щелчка.Тогда все, что вам нужно, это просто расположить его горизонтально в соответствии с положением иконки, но так работает большинство таких плагинов.

0 голосов
/ 26 ноября 2018

Вы можете использовать .toggle() метод HTML DOM classList свойство для добавления / удаления класса CSS

Обратите внимание, что #listItem добавлено к ul

<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>

Идолжен быть определен класс CSS: 

.hidden{
   display: none;
}
...