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>

我在表格中创建了可点击的tr元素，这些元素通向新页面。在每个tr中最后都是一个td，带有一个下拉切换，它不应该触发tr事件，而只是打开下拉列表。

我试图通过使用event.stopPropagation（）来阻止href事件，但这也会杀死切换事件。所以我用$（this）。dropdown（＆＃34; toggle＆＃34;）再次触发切换事件，但我觉得这对于这种简单的行为会变得太复杂。

有一条简单的出路吗？

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();
 });

您仍然需要更新到您想要对下拉列表执行的任何操作。就我而言，我可以切换它的可见性。

此外，由于您的下拉列表位于表格中 - 您还需要终止每个元素的传播..或者在表格之外拉dropdown-menu。

还有一个技巧是将活动订阅到td，并将td留下取消订阅的下拉菜单。

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

可点击式广告

1 个答案: