クリック可能な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> 

新しいページにつながるクリック可能なtr要素がテーブルに作成されました。すべてのtrの末尾には、ドロップダウントグルがあります。これは、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(); 
}); 

あなたはまだあなたがあなたのドロップダウンでやりたいものは何でもに更新する必要があります。私の場合、私はそれの可視性をトグルしています。

また、ドロップダウン自体がテーブルにあるため、各要素の伝播も終了する必要があります。dropdown-menuをテーブル外にプルする必要があります。

さらに1つのトリックは、イベントをtdにサブスクライブし、tdをドロップダウンを解除したままにします。

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