Question

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

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>

CSS代码

.documents-container {
    padding: 40px 37px 40px 46px;
}

.documents-container>a {
    float: right;
    margin-top: 15px;
}

.documents-table {
    width: 100%;
    margin-top: 20px;
}

.documents-table th, .documents-table td {
    border-bottom: 1px solid #c3c3c3;
}

.documents-table th {
    text-transform: uppercase;
}

.documents-table.no-text-transform th {
    text-transform: none;
}

.documents-table .info-bubble.info-bubble-bottom.info-bubble-bottom-right
    {
    right: -32px;
}

.document-status {
    display: inline-block;
    height: 14px;
    width: 14px;
    cursor: pointer;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
}

.document-status--red {
    background: #ed1b2e;
}

.meta {
    color: #9d9d9d;
    font-size: 11px;
}

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

Answer 1

正如它在文档https://api.jquery.com/focus/中所写，只有链接，输入，选择或者textarea可以通过此方法聚焦，或者您必须使用tabIndex属性，如下所示：

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

我更新了你的jsfiddle：http://jsfiddle.net/E85pn/14/

专注不工作

1 个答案: