Show/hide table 点击某个特定 TD 时的 TD

Question

我发现这个答案完全解决了我的问题，但我不知道如何在我的代码中正确使用它。我有点让它工作，但突然什么都没有……

我只想在点击第一个时 show/hide 下一个 3 个 TD。

例如，当点击 "Tarif Plein" 时，价格、数量选择器和 "Réservez" TD 变为 show/hide。

下面你可以看到一些代码：

HTML

  <div class="tc-event-table-wrap">
    <table class="event_tickets tickera">
      <tbody>
        <tr>
          <th>Type de Ticket</th>
          <th>Prix</th>
          <th>Qté.</th>
          <th>Panier</th>
        </tr>
        <tr>
          <td>Tarif plein</td>
          <td>15 €</td>
          <td> <select class="tc_quantity_selector">
              <option value="1">1</option>
            </select></td>
          <td>
            <form class="cart_form"><a href="#" class="add_to_cart" data-button-type="cart" data-open-method="regular" id="ticket_1817"><span class="title">Achetez</span></a><input type="hidden" name="ticket_id" class="ticket_id" value="1817"></form>
          </td>
        </tr>
        <tr>
          <td>Réduit</td>
          <td>10 €</td>
          <td> <select class="tc_quantity_selector">
              <option value="1">1</option>
            </select></td>
          <td>
            <form class="cart_form"><a href="#" class="add_to_cart" data-button-type="cart" data-open-method="regular" id="ticket_1818"><span class="title">Achetez</span></a><input type="hidden" name="ticket_id" class="ticket_id" value="1818"></form>
          </td>
        </tr>
        <tr>
          <td>Carte Culture</td>
          <td>5.50 €</td>
          <td> <select class="tc_quantity_selector">
              <option value="1">1</option>
            </select></td>
          <td>
            <form class="cart_form"><a href="#" class="add_to_cart" data-button-type="cart" data-open-method="regular" id="ticket_1819"><span class="title">Achetez</span></a><input type="hidden" name="ticket_id" class="ticket_id" value="1819"></form>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

CSS 有一些样式，但最重要的部分是 display none/block

  display: block;
  text-align: center;
  border: none;
  padding: 0px 10px 0px 10px;
}

.tc-event-table-wrap td:nth-child(1) {
  font-weight: bold;
  line-height: 1;
  padding-bottom: 15px;
}

.tc-event-table-wrap td:nth-child(2) {
  float: left;
  width: 50%;
  text-align: right;
}

.tc-event-table-wrap td:nth-child(3) {
  float: right;
  width: 50%;
  text-align: left;
  padding-bottom: 10px;
}

/* What need to change is here */

.tc-event-table-wrap td:nth-child(1n+2) {
  display: none;
}

.showTicket .tc-event-table-wrap td:nth-child(1n+2) {
  display: block;
}

/* END What need to change is here */

.tc-event-table-wrap tr {
  padding: 15px 10px 10px 10px !important;
  background-color: #f7f7f7;
}

.tc-event-table-wrap tr:first-child {
  display: none;
}

.tc-event-table-wrap tr:hover {
  background-color: #ffdd00;
  cursor: pointer;
}

.tc-event-table-wrap {
  border-radius: 10px;
}

.tickera table {
  width: 100%;
}

.tickera .add_to_cart {
  color: #61b700 !important;
}

.tickera .add_to_cart :hover {
  font-weight: bold;
  color: #61b700 !important;
  text-decoration: underline;
  display: block;
}

.tc_quantity_selector {
  width: 75%;
  font-size: 13px;
  border: 1px solid #ccc;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

jQuery

    $('.tc-event-table-wrap td:nth-child(1)').click(function(){
        $(this).parent().toggleClass("showTicket");
    });
});

Answer 1

您好，您好，在 Whosebug 上！

你的代码一切都很完美！

只有一件事你忘了做以获得预期结果：

改变

.showTicket .tc-event-table-wrap td:nth-child(1n+2) {
  display: block;
}

到

.tc-event-table-wrap .showTicket td:nth-child(1n+2) {
  display: block;
}

$('.tc-event-table-wrap td:nth-child(1)').click(function(){
        $(this).parent().toggleClass("showTicket");
    });

{ display: block;
  text-align: center;
  border: none;
  padding: 0px 10px 0px 10px;
}

.tc-event-table-wrap td:nth-child(1) {
  font-weight: bold;
  line-height: 1;
  padding-bottom: 15px;
}

.tc-event-table-wrap td:nth-child(2) {
  float: left;
  width: 50%;
  text-align: right;
}

.tc-event-table-wrap td:nth-child(3) {
  float: right;
  width: 50%;
  text-align: left;
  padding-bottom: 10px;
}

/* What need to change is here */

.tc-event-table-wrap td:nth-child(1n+2) {
  display: none;
}

.tc-event-table-wrap .showTicket  td:nth-child(1n+2) {
  display: block;
}

/* END What need to change is here */

.tc-event-table-wrap tr {
  padding: 15px 10px 10px 10px !important;
  background-color: #f7f7f7;
}

.tc-event-table-wrap tr:first-child {
  display: none;
}

.tc-event-table-wrap tr:hover {
  background-color: #ffdd00;
  cursor: pointer;
}

.tc-event-table-wrap {
  border-radius: 10px;
}

.tickera table {
  width: 100%;
}

.tickera .add_to_cart {
  color: #61b700 !important;
}

.tickera .add_to_cart :hover {
  font-weight: bold;
  color: #61b700 !important;
  text-decoration: underline;
  display: block;
}

.tc_quantity_selector {
  width: 75%;
  font-size: 13px;
  border: 1px solid #ccc;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tc-event-table-wrap">
    <table class="event_tickets tickera">
      <tbody>
        <tr>
          <th>Type de Ticket</th>
          <th>Prix</th>
          <th>Qté.</th>
          <th>Panier</th>
        </tr>
        <tr>
          <td>Tarif plein</td>
          <td>15 €</td>
          <td> <select class="tc_quantity_selector">
              <option value="1">1</option>
            </select></td>
          <td>
            <form class="cart_form"><a href="#" class="add_to_cart" data-button-type="cart" data-open-method="regular" id="ticket_1817"><span class="title">Achetez</span></a><input type="hidden" name="ticket_id" class="ticket_id" value="1817"></form>
          </td>
        </tr>
        <tr>
          <td>Réduit</td>
          <td>10 €</td>
          <td> <select class="tc_quantity_selector">
              <option value="1">1</option>
            </select></td>
          <td>
            <form class="cart_form"><a href="#" class="add_to_cart" data-button-type="cart" data-open-method="regular" id="ticket_1818"><span class="title">Achetez</span></a><input type="hidden" name="ticket_id" class="ticket_id" value="1818"></form>
          </td>
        </tr>
        <tr>
          <td>Carte Culture</td>
          <td>5.50 €</td>
          <td> <select class="tc_quantity_selector">
              <option value="1">1</option>
            </select></td>
          <td>
            <form class="cart_form"><a href="#" class="add_to_cart" data-button-type="cart" data-open-method="regular" id="ticket_1819"><span class="title">Achetez</span></a><input type="hidden" name="ticket_id" class="ticket_id" value="1819"></form>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Show/hide table 点击某个特定 TD 时的 TD

Show/hide table TDs when clicking on one particular TD

html

jquery

show

hide