引导表行单击以打开其他选项按钮答案

【问题标题】：Bootstrap table row click to open up additional options buttons引导表行单击以打开其他选项按钮
【发布时间】：2020-05-09 02:12:51
【问题描述】：

我们有一个使用 angularjs 创建的表，并希望为每一行添加一个选项来编辑或删除。我们真的想要类似于 codepen 的东西，但没有 jquery。

到目前为止，我们有以下内容：

 <tr ng-repeat="item in data.list | filter:searchTable track by item.sys_id" >
    <td class="moreOption">
      <div class="more" ng-click="c.showHide(item);">
        <div class='moredrop' ng-hide="!item.IsHidden">
          <ul>
            <li>
              <i class='material-icons'>edit</i>
              <span class='label'>Edit</span>
            </li>
            <li>
              <i class='material-icons'>delete</i>
              <span class='label'>Delete</span>
            </li>
          </ul>
        </div>
      </div> 
    </td>
  </tr>

在我们的客户端控制器中，我们有：

c.showHide = function(item) {
  item.IsHidden = !item.IsHidden;
}

我们真正苦苦挣扎的是显示编辑或删除的弹出框的 CSS 样式。我们希望它在单击时“浮动”在 3 个垂直点图标旁边，就像上面的 codepen 链接一样，但似乎无法让它看起来像那样。此外，现在当您单击一行的 3 个垂直点，然后单击另一行时，它会打开 2 个框。在我们的客户端控制器中，我们需要做什么才能一键关闭之前的弹出框？

【问题讨论】：

您希望他们实际上必须单击以显示额外的选项并跟踪每行可见的布尔值，以便他们可以一次在多行上保持可见或不可见？或者您是否宁愿以一种漂亮的方式将其悬停在该行的悬停上，就像那个 codepen 一样，并仅使用 css 将其保留在合成器线程（个人建议）上，而不是为每个项目添加更多的观察者和另一个属性，这将不可避免地产生性能问题添加更多行？

标签： html css angularjs html-table

【解决方案1】：

为什么不使用简单的 Bootstrap 下拉菜单？

Dropdowns: Bootstrap

使用您自己的按钮或图标通过此代码启动下拉菜单。

$('.dropdown-toggle').dropdown()

【讨论】：