Question

我正在尝试使用jquery创建一个滑动表，但是由于jquery滑动对表格的效果不太好，我必须将内容包装在div中

我已经尝试写过类似的内容：

    $("div.headhook").mouseenter(function () {
//$(this).parent().next("div.bodyhook").slideToggle("slow");
$(this).closest("div").nextAll("div.bodyhook").slideToggle("fast");
});

但它不起作用

这是我的表结构的一部分（还有更多的theads和tbodys）：

     <table id="forum-0" class="forum-table">
                                   <thead class="thead5" style=""><tr id="forum-list-5" class="odd first-row container container-5" >
                        <th colspan="5" class="container">
            <div id="headhook5" class="headhook">
              <div class="forum-details">

                <div class="container_name name">
                  <a href="/forum/5">Forum title</a>
                </div>
                                  <div class="description">Forum description</div>
                              </div>
              </div>
            </th>
                            <tr><td colspan="5" class="container_header"></td></tr>

                      </tr>
          </thead>
        <tbody class="tbody5">

            <tr class="accordion-fix"><td colspan="5" width="940px" height="0" class="accordion-fix"> 
            <div id="bodyhook5" class="bodyhook">
                                <table>
         <tr id="forum-list-11" class="even middle-row in-container-0">

            <td class="forum-icon"> <span id="thmr_23" class="thmr_call">

  <img src="/sites/all/modules/advanced_forum/styles/naked/images/forum-folder.png" alt="folder" title="folder" width="30" height="27" /></span>

 </td>

            <td class="forum-name2">
                              <div class="forum-details">
                  <div class="name"><a href="/forum/11">Forum A</a></div>
                                  </div>
                          </td>

            <td class="topics">
              <div class="num num-topics">
               1              </div>
            </td>

            <td class="num posts">
              2            </td>

            <td class="last-reply">
              <span class="last-reply-timestamp">2010-11-09 11:51</span> <br/>
              <span class="last-reply-name">jan</span>
            </td>
        </tr>
        </table>
                                <table>

         <tr id="forum-list-12" class="odd middle-row in-container-0">

            <td class="forum-icon"> <span id="thmr_24" class="thmr_call">
  <img src="/sites/all/modules/advanced_forum/styles/naked/images/forum-folder.png" alt="folder" title="folder" width="30" height="27" /></span>

 </td>

            <td class="forum-name2">
                              <div class="forum-details">
                  <div class="name"><a href="/forum/12">Forum B</a></div>

                                  </div>
                          </td>

            <td class="topics">
              <div class="num num-topics">
               0              </div>
            </td>

            <td class="num posts">

              0            </td>

            <td class="last-reply">
              <span class="last-reply-timestamp"></span> <br/>
              <span class="last-reply-name"></span>
            </td>
        </tr>
        </table>

                                <table>
         <tr id="forum-list-13" class="even middle-row in-container-0">

            <td class="forum-icon"> <span id="thmr_25" class="thmr_call">
  <img src="/sites/all/modules/advanced_forum/styles/naked/images/forum-folder.png" alt="folder" title="folder" width="30" height="27" /></span>

 </td>

            <td class="forum-name2">
                              <div class="forum-details">

                  <div class="name"><a href="/forum/13">Forum C</a></div>
                                  </div>
                          </td>

            <td class="topics">
              <div class="num num-topics">
               0              </div>
            </td>

            <td class="num posts">
              0            </td>

            <td class="last-reply">
              <span class="last-reply-timestamp"></span> <br/>
              <span class="last-reply-name"></span>
            </td>
        </tr>

        </table>
                                      </div>
          </td></tr>
          </tbody>

Answer 1

我不是100％确定你到底想要达到的目标，但这里至少可以使用：

$(this).parents("table").first().find("div.bodyhook").slideToggle("slow");

这在DOM中从'this'开始（即你的headhook）直到第一个'table'项。从那里它找到所有div.bodyhook元素（在该表内）并执行slideToggle。

[编辑] 你可以这样做：

$(this).parent().parent().parent().parent().find("div.bodyhook").slideToggle("slow");

适用于1.3.2。它有点“脏”，绝对是一种解决方法，但只要你的体头和桌子之间的“DOM距离”保持不变，你就可以了。

[编辑]（关于你的评论）我可以想到两种方法：

1）当另一个被打开时'隐藏'：

$( function() {
    $("div.bodyhook").hide(); // start all hidden
    $("div.headhook").mouseenter( showthis );
} );

function showthis () {    
    $("div.headhook")
        .not($(this))
        .parent().parent().parent().parent()
        .find("div.bodyhook")
        .slideUp("slow");
    $(this)
        .parent().parent().parent().parent()
        .find("div.bodyhook")
        .slideDown("slow");
}

2）当鼠标离开时“隐藏”

function showthis() {
    $(this)
        .parent().parent().parent().parent()
        .find("div.bodyhook")
        .slideDown("slow");
}

function hidethis() {
    $(this)
        .parent().parent().parent().parent()
        .find("div.bodyhook")
        .slideUp("slow");
}

$(function() {
    $("div.bodyhook").hide(); // start all hidden
    $("div.headhook").mouseenter(showthis);
    $("div.headhook").mouseleave(hidethis);
});

jquery通过多个div搜索

1 个答案: