Question

我正在尝试显示/隐藏表#block-views-apk_user_tracker_page-block_1 .views-table onclick链接“通知”，它位于div #block-views-apk_user_tracker_page-block_1 .views-header内。我尝试了不同的脚本，但没有一个工作，它们似乎都是id或列表，而不是类和表。

这是代码，它是网站通知，Facebook风格。

<div class="view-header">
      <img src="/photos/led_red.gif"> <a href="/user/3/newforumposts">NOTIFICATIONS (6)</a>    </div>
  
  
  
      <div class="view-content">
      <table class="views-table cols-6">
    <thead>
    <tr>
              <th class="views-field views-field-title">
                  </th>
              <th class="views-field views-field-last-comment-timestamp">
                  </th>
              <th class="views-field views-field-new-comments">
                  </th>
          </tr>
  </thead>
  <tbody>
          <tr class="odd views-row-first">
                  <td class="views-field views-field-title">
            <a href="/node/3955">TITLE 1</a>          </td>
                  <td class="views-field views-field-last-comment-timestamp">
            24/05/2015 - 03:56          </td>
                  <td class="views-field views-field-new-comments">
            <a href="/node/3955?page=14#new">1 new</a>          </td>
              </tr>
          <tr class="even">
                  <td class="views-field views-field-title">
            <a href="/node/10452">TITLE 2</a>          </td>
                  <td class="views-field views-field-last-comment-timestamp">
            24/05/2015 - 03:24          </td>
                  <td class="views-field views-field-new-comments">
            <a href="/node/10452#new">2 new</a>          </td>
              </tr>
          <tr class="odd">
                  <td class="views-field views-field-title">
            <a href="/node/10445">TITLE 3</a>          </td>
                  <td class="views-field views-field-last-comment-timestamp">
            24/05/2015 - 03:21          </td>
                  <td class="views-field views-field-new-comments">
            <a href="/node/10445?page=2#new">1 new</a>          </td>
              </tr>
          <tr class="even">
                  <td class="views-field views-field-title">
            <a href="/node/3871">ANOTHER TITLE</a>          </td>
                  <td class="views-field views-field-last-comment-timestamp">
            24/05/2015 - 03:17          </td>
                  <td class="views-field views-field-new-comments">
            <a href="/node/3871?page=8#new">1 new</a>          </td>
              </tr>
          <tr class="odd">
                  <td class="views-field views-field-title">
            <a href="/node/10470">Yet another title</a>          </td>
                  <td class="views-field views-field-last-comment-timestamp">
            24/05/2015 - 03:14          </td>
                  <td class="views-field views-field-new-comments">
            <a href="/node/10470#new">1 new</a>          </td>
              </tr>
          <tr class="even views-row-last">
                  <td class="views-field views-field-title">
            <a href="/node/10469">and another</a>          </td>
                  <td class="views-field views-field-last-comment-timestamp">
            24/05/2015 - 03:13          </td>
                  <td class="views-field views-field-new-comments">
            <a href="/node/10469?page=1#new">1 new</a>          </td>
              </tr>
      </tbody>
</table>
    </div>

Answer 1

无需添加额外的id或class。

$(function() {
     $(".view-header").click("a", function(e) {
         e.preventDefault();
         $(".view-header").siblings(".view-content").toggle();
    });
});

Answer 2

如果我理解，您希望在用户cliks

时隐藏/显示带有 view-table 类的div

您必须向 class 添加 id 或 <a href="/user/3/newforumposts"> ，就像这样：

<div class="view view-apk-user-tracker-page view-id-apk_user_tracker_page view-display-id-block_1 view-dom-id-6">
  <div class="view-header">
    <img src="/photos/led_red.gif">
    <a href="/user/3/newforumposts" class="notif isShown">NOTIFICATIONS (6)</a>
  </div>

    <!-- Following the code -->

您将能够使用此js代码实现您的目标：

$(document).ready(function() {
  $('#block-views-apk_user_tracker_page-block_1 .views-header .notif').click(function () {
    if($(this).hasClass('isShown')) {
      $(this).removeClass('isShown');
      $('#block-views-apk_user_tracker_page-block_1 .views-table').fadeOut(250);
    } else {
      $(this).addClass('isShown');
      $('#block-views-apk_user_tracker_page-block_1 .views-table').fadeIn(250);
    }
  });
});

如何显示/隐藏表onclick

2 个答案: