Jquery 注意力不集中

我试图使用JQuery的focus（）方法，但我不明白为什么它不起作用。这里有一把小提琴：有什么建议吗

HTML代码

    <div class="documents-container cfx">
   <table class="documents-table">
      <tbody>
         <tr class="table-row-details" style="display: none;">
            <td class="pad-box-table-details" colspan="6">
               <div>
                  <h4> test </h4>
                  <ul class="styled-list">
                     <li> How to solve the issue... </li>
                     <li> Some other solution... </li>
                  </ul>
               </div>
            </td>
         </tr>
         <tr class="with-details js-toggle-table-details">
            <td>
               24.08.2015
               <div class="meta">
                  12:45
               </div>
            </td>
            <td>
               Sending despatch advice
            </td>
            <td>
               ... 
               <div class="meta">
                  test
               </div>
            </td>
            <td>
               <a href="#">
               Unknown receiver
               </a>
            </td>
            <td id="resolvedStatus">
               Unresolved 
            </td>
            <td class="align-right">
               <div id="infoBubble" class="js-info-bubble-parent">
                  <div class="document-status document-status--red js-docReqAttention-bubble-toggler">
                     <div class="js-info-bubble info-bubble info-bubble-bottom info-bubble-bottom-right" style="display: none;">
                        <div class="info-bubble-content">
                           <div class="document-status-bubble">
                              additional info to be added...
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </td>
         </tr>
         <tr class="table-row-details" style="display: table-row;">
            <td class="pad-box-table-details" colspan="6">
               <div>
                  <ul class="styled-list">
                     <li> How to solve the issue... </li>
                     <li> Some other solution... </li>
                  </ul>
               </div>
            </td>
         </tr>
         <tr class="with-details js-toggle-table-details">
            <td>
               24.08.2015
               <div class="meta">
                  12:41
               </div>
            </td>
            <td>
               Sending despatch advice
            </td>
            <td>
            </td>
            <td>
               <a href="#">
               Unknown receiver
               </a>
            </td>
            <td id="resolvedStatus">
               Unresolved 
            </td>
            <td class="align-right">
               <div id="infoBubble" class="js-info-bubble-parent">
                  <div class="document-status document-status--red js-docReqAttention-bubble-toggler">
                     <div class="js-info-bubble info-bubble info-bubble-bottom info-bubble-bottom-right" style="display: none;">
                        <div class="info-bubble-content">
                           <div class="document-status-bubble">
                              additional info to be added...
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </td>
         </tr>
         <tr class="table-row-details" style="display: none;">
            <td class="pad-box-table-details" colspan="6">
               <div>
                  <ul class="styled-list">
                     <li> How to solve the issue... </li>
                     <li> Some other solution... </li>
                  </ul>
               </div>
            </td>
         </tr>
      </tbody>
   </table>
</div>

JavaScript代码

 $('.js-toggle-table-details').on('click', function() {
                var $tablerow = $(this).next('.table-row-details');
                $('.table-row-details').not($tablerow).hide();
                $($tablerow).slideToggle("slow").focus();
            });

---

正如文档中所述，此方法只能聚焦链接、输入、选择或文本区域，或者您必须使用tabIndex属性，如下所示：

 <tr class="with-details js-toggle-table-details" tabIndex = "1">

---

我更新了您的JSFIDLE:

尝试在问题中发布相关代码。还请详细说明它不起作用。

 <tr class="with-details js-toggle-table-details" tabIndex = "1">