可点击 tr 中的下拉切换

Question

    <tr class='clickable-row' data-href='details.html'>
    ...
    <td>
     <div class="ibox-tools">
      <a class="dropdown-toggle doDropdown" data-toggle="dropdown">
        <i class="fa fa-wrench"></i>
      </a>
      <ul class="dropdown-menu">
       <li><a href="#">Delete</a></li>
      </ul>
     </div>
    </td>
    </tr>
    ...
    <script>
      $(".clickable-row").click(function() {
         window.location = $(this).data("href");
      });

      $('.doDropdown').click(function( event ) {
         $(this).dropdown();
         return false;
     </script>

我在 table 中创建了可点击的 tr 元素，这些元素会指向一个新页面。在每个 tr 中，末尾都有一个 td，带有下拉开关，它不应触发 tr 事件，而应仅打开下拉菜单。

我试图通过使用 event.stopPropagation() 来阻止 href 事件，但这也会终止切换事件。所以我用 $(this).dropdown("toggle") 再次触发切换事件，但我觉得这对于简单的行为来说会变得太复杂了。

有没有简单的出路？

Answer 1

event.stopPropagation() 确实有效。

html:

<table>
  <tr class='clickable-row' data-href='details.html'>
    <td>
      some content here
    </td>
    <td>
      <div class="ibox-tools">
        <a class="dropdown-toggle doDropdown" data-toggle="dropdown">
          <i class="fa fa-wrench">Action</i>          
        </a>
        <ul class="dropdown-menu">
          <li><a href="#">Delete</a></li>
        </ul>
      </div>
    </td>
  </tr>
</table>

脚本：

$(".clickable-row").click(function() {
         //window.location = $(this).data("href");
         alert('row click');
      });

$('.doDropdown').click(function( event ) {
    alert('dropdown click');
  $('.dropdown-menu').toggle();
  event.preventDefault();
  event.stopPropagation();
  //$(this).dropdown();
 });

您仍然需要更新您想要对下拉菜单执行的任何操作。在我的例子中，我正在切换它的可见性。

此外，由于您的下拉列表本身位于 table 中 - 您还需要终止每个元素上的均匀传播.. 或者将 dropdown-menu 拉到 table.[=17 之外=]

另一个技巧是将事件订阅到 td 并取消订阅下拉菜单 td。

$('.clickable-row td:not(:last)').click(...);

可点击 tr 中的下拉切换

dropdown-toggle in clickable tr

jquery

toggle

dropdown

clickable

tr