如何显示/隐藏表单击

How to show/hide table onclick

本文关键字：隐藏表单单击显示何显示更新时间：2023-09-26

我试图显示/隐藏表#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>

不需要再添加id或class

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

如果我理解的话，你想在用户点击

时隐藏/显示class 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);
    }
  });
});