显示/隐藏显示表格内容的 <a> 链接的类函数

Question

我正在为我放置在表格中的内容使用类的显示/隐藏选项而苦苦挣扎。我是 JQuery 的初学者，在 html 方面只有一点点高级，但我希望它能够正常工作。我想要这样的东西：

链接：查看更多...放在表格的一行

• 点击后，显示整个表格，并在当前表格中放置更多描述并带有链接，然后链接内容更改为隐藏；

• 再次单击时，它会隐藏此表格并包含更多描述，并且链接内容再次更改为查看更多

我在两个不同的链接上做了这件事，在两个不同的地方，但我想在一个地方做。

这是我在 html 中的链接显示

<a class="show" href="#" style="text-decoration: none; color: blue">object 1 </a>

这是我点击链接后应该显示的表格的一部分：

<tr style="display: none" class="desc">
  <td colspan="2">
    <table border="0" cellspacing="10" summary="Object 1">
      (description)
    </table>
  </td>
</tr>

这是我对链接隐藏的内容：

<td style="padding:5px" colspan="2" align="center"><a class="hide" href="#" style="text-decoration: none; color: blue">Hide the description...</a></td>

还有 JS

<script type="text/javascript">
  $('#hotels .show').click(function () {
    $('#hotels tr.desc').hide();
    var tr = $(this).parentsUntil('tr').last().parent();
    tr.next().show();
  });

  $('#hotels .hide').click(function () {
    var tr = $(this).parentsUntil('table').last().parentsUntil('tr').last().parent();
    tr.hide();
  });
</script>   

Answer 1

我想你可以试试下面的代码：

注意：因为没有特定的 HTML，所以无法测试：

HTML 代码：

<a class="showhide" href="#" style="text-decoration: none; color: blue">See more...</a>

JS代码：

<script type="text/javascript">
  $('#hotels .showhide').click(function () {
    if($(this).text() == "See more...")
    {
        //show the contents
        $('#hotels tr.desc').hide();
        var tr = $(this).parentsUntil('tr').last().parent();
        tr.next().show();
        $(this).text("Hide");
    }
    else
    {
        //hide the contents
        $('#hotels tr.desc').hide();
        $(this).text("See more...");
    }

  });
</script>

Answer 2

我将假设显示/隐藏链接在它自己的行中，因为这似乎是您所描述的：

<tr>
  <td colspan="2">
    <a class="show" href="#" style="text-decoration: none; color: blue">object 1 </a>
  </td>
</tr>

如果是这样，并且描述行总是跟在它后面，您可以使用closest("tr")、next 和toggle：

$(document).on("click", ".show", function() {
  $(this).closest("tr").next().toggle();
  return false;
});

例子：

$(document).on("click", ".show", function() {
  $(this).closest("tr").next().toggle();
  return false;
});

<table>
  <tbody>
    <tr>
      <td colspan="2">
        <a class="show" href="#" style="text-decoration: none; color: blue">object 1 </a>
      </td>
    </tr>
    <tr style="display: none" class="desc">
      <td colspan="2">
        <table border="0" cellspacing="10" summary="Object 1">
          (Description 1)
        </table>
      </td>
    </tr>

    <tr>
      <td colspan="2">
        <a class="show" href="#" style="text-decoration: none; color: blue">object 2</a>
      </td>
    </tr>
    <tr style="display: none" class="desc">
      <td colspan="2">
        <table border="0" cellspacing="10" summary="Object 2">
          (Description 2)
        </table>
      </td>
    </tr>

    <tr>
      <td colspan="2">
        <a class="show" href="#" style="text-decoration: none; color: blue">object 3 </a>
      </td>
    </tr>
    <tr style="display: none" class="desc">
      <td colspan="2">
        <table border="0" cellspacing="10" summary="Object 3">
          (Description 3)
        </table>
      </td>
    </tr>
  </tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

尽管如此，当您还想做切换链接文本之类的操作时，它开始变得不必要地复杂且难以维护。相反，我会将描述表放在td 的链接中，在td 上切换一个类，并使用CSS 来管理显示/隐藏的内容和方式：

$(document).on("click", ".toggle", function() {
  $(this).closest(".toggleable").toggleClass("showing");
  return false;
});

.toggleable .desc {
  display: none;
}
.toggleable.showing .desc {
  display: block;
}
.toggleable .show,
.toggleable .hide {
  text-decoration: none;
  color: blue;
}
.toggleable .hide {
  display: none;
}
.toggleable.showing .hide {
  display: inline;
}
.toggleable.showing .show {
  display: none;
}

<table>
  <tbody>
    <tr>
      <td class="toggleable" colspan="2">
        <a class="toggle show" href="#">object 1</a>
        <a class="toggle hide" href="#">hide details</a>
        <table class="desc" border="0" cellspacing="10" summary="Object 1">
          <tr>
            <td>
              (Description 1)
            </td>
          </tr>
        </table>
      </td>
    </tr>
    <tr>
      <td class="toggleable" colspan="2">
        <a class="toggle show" href="#">object 2</a>
        <a class="toggle hide" href="#">hide details</a>
        <table class="desc" border="0" cellspacing="10" summary="Object 2">
          <tr>
            <td>
              (Description 2)
            </td>
          </tr>
        </table>
      </td>
    </tr>
    <tr>
      <td class="toggleable" colspan="2">
        <a class="toggle show" href="#">object 3</a>
        <a class="toggle hide" href="#">hide details</a>
        <table class="desc" border="0" cellspacing="10" summary="Object 3">
          <tr>
            <td>
              (Description 3)
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

注意 td 上包含所有内容的类 (toggleable)，以及各种播放器上的类 (show、hide、toggle) 以及 CSS 如何负责发生的事情.

Answer 3

我可以以一种不同的、更有条理的方式做一些可重复使用的事情。考虑一下这个 sn-p：

$(function () {
  $(".see-more").click(function () {
    $($(this).attr("href")).toggleClass("show");
    return false;
  });
});

.see-more-target .see-show {display: none;}
.see-more-target.show .see-show {display: inline;}
.see-more-target.show .see-hide {display: none;}

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<a href="#see-more-1" class="see-more">See More 1</a>

<div id="see-more-1" class="see-more-target">
  <p>This is the content of see more 1. <span class="see-hide"><a href="#see-more-1" class="see-more">See More</a></span><span class="see-show"><a href="#see-more-1" class="see-more">Hide It</a> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem optio dolorum sed qui mollitia aperiam nulla voluptate veritatis vel error eius consequatur quae quisquam, ut doloremque odio repellat iste id.</span></p>
</div>

<a href="#see-more-2" class="see-more">See More 2</a>

<div id="see-more-2" class="see-more-target">
  <p>This is the content of see more 1. <span class="see-hide">More...</span><span class="see-show">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem optio dolorum sed qui mollitia aperiam nulla voluptate veritatis vel error eius consequatur quae quisquam, ut doloremque odio repellat iste id.</span></p>
</div>

好的，请问您是这样问的吗？

$(function () {
  $('[href="#show"]').click(function () {
    $(this).closest("p").addClass("open");
    return false;
  });
  $('[href="#hide"]').click(function () {
    $(this).closest("p").removeClass("open");
    return false;
  });
});

p.open a.show,
p span.more {display: none;}
p.open span.more {display: inline;}

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<p>Microsoft Corporation /ˈmaɪkrɵsɒft, -sɔːft/ (commonly referred to as Microsoft) is an American multinational technology company headquartered in Redmond, Washington, that develops <a href="#show" class="show">Show</a><span class="more">, manufactures, licenses, supports and sells computer software, consumer electronics and personal computers and services. Its best known software products are the Microsoft Windows line of operating systems, Microsoft Office office suite, and Internet Explorer and Edge web browsers. Its flagship hardware products are the Xbox game consoles and the Microsoft Surface tablet lineup. It is the world's largest software maker by revenue, and one of the world's most valuable companies. <a href="#hide">Hide</a></span></p>
<p>Microsoft was founded by Paul Allen and Bill Gates on April 4, 1975, to develop and sell BASIC interpreters for Altair 8800. <a href="#show" class="show">Show</a><span class="more">It rose to dominate the personal computer operating system market with MS-DOS in the mid-1980s, followed by Microsoft Windows. The company's 1986 initial public offering, and subsequent rise in its share price, created three billionaires and an estimated 12,000 millionaires among Microsoft employees. Since the 1990s, it has increasingly diversified from the operating system market and has made a number of corporate acquisitions. In May 2011, Microsoft acquired Skype Technologies for $8.5 billion in its largest acquisition to date. <a href="#hide">Hide</a></span></p>
<p>As of 2015, Microsoft is market dominant in both the IBM PC-compatible operating system (while it lost the majority of the overall operating system market to Android) and office software suite markets (the latter with Microsoft Office). <a href="#show" class="show">Show</a><span class="more">The company also produces a wide range of other software for desktops and servers, and is active in areas including Internet search (with Bing), the video game industry (with the Xbox, Xbox 360 and Xbox One consoles), the digital services market (through MSN), and mobile phones (via the operating systems of Nokia's former phones and Windows Phone OS). In June 2012, Microsoft entered the personal computer production market for the first time, with the launch of the Microsoft Surface, a line of tablet computers. <a href="#hide">Hide</a></span></p>