通过单击切换显示文本一次答案

【问题标题】：Toggle that reveal text one at a time by click通过单击切换显示文本一次
【发布时间】：2018-04-26 08:33:31
【问题描述】：

我的代码有问题。目标是在用户单击链接时显示文本。但我还希望当他单击链接时，唯一显示的文本是下面的文本，而不是所有单元格中的文本。有人可以知道我做错了什么吗？我可能会添加其他链接（超过 2 个），并且我想确保它每次都能正常工作。

$(document).ready(function() {
  $(".toggler").click(function(e) {
    e.preventDefault();
    $('.cat' + $(this).attr('data-prod-cat')).toggle();
  });
});

a {
  color: #002642;
}

.center {
  text-align: center;
}

.toggler,
.cat1 {
  font-family: 'Varela Round';
  color: white;
}

td {
  display: block;
  width: auto;
  border: 1px dotted #c4a77d;
  background-color: #c4a77d;
  color: white;
  margin-bottom: 10px;
}

@media only screen and (min-width: 70em) {
  td {
    display: table-cell;
    border: 1px dotted #c4a77d;
    background-color: #c4a77d;
    color: white;
    margin-bottom: 0px;
  }
}

p {
  font-family: 'Varela Round';
  font-weight: bold;
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<table cellpadding="0" cellspacing="5" style="table-layout: fixed; width:100%" width="100%">
  <tbody>
    <tr>
      <td>
        <table style="width: 100%;text-align:center;">
          <tbody>
            <tr>
              <td>
                <p>SOCIÉTÉS: 230</p>
              </td>
            </tr>
            <tr>
              <td><a class="toggler" data-prod-cat="1" href="#">+ En savoir plus</a></td>
            </tr>
            <tr class="cat1" style="display:none">
              <td>Part CAC 40 : 40</td>
            </tr>
            <tr class="cat1" style="display:none">
              <td>Part Filiales +100MK€: 190</td>
            </tr>
          </tbody>
        </table>
      </td>
      <td>
        <table style="width: 100%;text-align:center;">
          <tbody>
            <tr>
              <td>
                <p>CONTACTS: 16 700</p>
              </td>
            </tr>
            <tr>
              <td><a class="toggler" data-prod-cat="1" href="#">+ En savoir plus</a></td>
            </tr>
            <tr class="cat1" style="display:none">
              <td>Part CAC 40 : 10 000</td>
            </tr>
            <tr class="cat1" style="display:none">
              <td>Part Filiales +100MK€: 6 700</td>
            </tr>
          </tbody>
        </table>
      </td>
      <td>
        <p>EMAIL NOMINATIF</p>
      </td>
      <td>
        <p>OPT OUT</p>
      </td>
      <td>
        <p>LIGNES DIRECTES/MOBILES</p>
      </td>
    </tr>
  </tbody>
</table>

【问题讨论】：

标签： javascript jquery html-table toggle show-hide

【解决方案1】：

您需要先获取<a> 的父级，然后获取<tr> 的父级。最后对cat1 类进行过滤，以切换包含cat1 类的所有同级。

$(document).ready(function() {
  $(".toggler").click(function(e) {
    e.preventDefault();
    $(this).parent().parent().siblings().filter(".cat1").toggle();
  });
});

$(document).ready(function() {
  $(".toggler").click(function(e) {
    e.preventDefault();
    $(this).parent().parent().siblings().filter(".cat1").toggle();
  });
});

a {
  color: #002642;
}

.center {
  text-align: center;
}

.toggler,
.cat1 {
  font-family: 'Varela Round';
  color: white;
}

td {
  display: block;
  width: auto;
  border: 1px dotted #c4a77d;
  background-color: #c4a77d;
  color: white;
  margin-bottom: 10px;
}

@media only screen and (min-width: 70em) {
  td {
    display: table-cell;
    border: 1px dotted #c4a77d;
    background-color: #c4a77d;
    color: white;
    margin-bottom: 0px;
  }
}

p {
  font-family: 'Varela Round';
  font-weight: bold;
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<table cellpadding="0" cellspacing="5" style="table-layout: fixed; width:100%" width="100%">
  <tbody>
    <tr>
      <td>
        <table style="width: 100%;text-align:center;">
          <tbody>
            <tr>
              <td>
                <p>SOCIÉTÉS: 230</p>
              </td>
            </tr>
            <tr>
              <td><a class="toggler" data-prod-cat="1" href="#">+ En savoir plus</a></td>
            </tr>
            <tr class="cat1" style="display:none">
              <td>Part CAC 40 : 40</td>
            </tr>
            <tr class="cat1" style="display:none">
              <td>Part Filiales +100MK€: 190</td>
            </tr>
          </tbody>
        </table>
      </td>
      <td>
        <table style="width: 100%;text-align:center;">
          <tbody>
            <tr>
              <td>
                <p>CONTACTS: 16 700</p>
              </td>
            </tr>
            <tr>
              <td><a class="toggler" data-prod-cat="1" href="#">+ En savoir plus</a></td>
            </tr>
            <tr class="cat1" style="display:none">
              <td>Part CAC 40 : 10 000</td>
            </tr>
            <tr class="cat1" style="display:none">
              <td>Part Filiales +100MK€: 6 700</td>
            </tr>
          </tbody>
        </table>
      </td>
      <td>
        <p>EMAIL NOMINATIF</p>
      </td>
      <td>
        <p>OPT OUT</p>
      </td>
      <td>
        <p>LIGNES DIRECTES/MOBILES</p>
      </td>
    </tr>
  </tbody>
</table>

【讨论】：

【解决方案2】：

您只需使用closest('table') 函数转到父table，然后使用.find('[class^="cat"]') 选择与当前单击的.toggler 相关的所有文本，例如：

$(document).ready(function() {
  $(".toggler").click(function(e) {
    e.preventDefault();

    $(this).closest('table').find('[class^="cat"]').toggle();
  });
});

希望这会有所帮助。

$(document).ready(function() {
  $(".toggler").click(function(e) {
    e.preventDefault();
    
    $(this).closest('table').find('[class^="cat"]').toggle();
  });
});

a {
  color: #002642;
}

.center {
  text-align: center;
}

.toggler,
.cat1 {
  font-family: 'Varela Round';
  color: white;
}

td {
  display: block;
  width: auto;
  border: 1px dotted #c4a77d;
  background-color: #c4a77d;
  color: white;
  margin-bottom: 10px;
}

@media only screen and (min-width: 70em) {
  td {
    display: table-cell;
    border: 1px dotted #c4a77d;
    background-color: #c4a77d;
    color: white;
    margin-bottom: 0px;
  }
}

p {
  font-family: 'Varela Round';
  font-weight: bold;
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<table cellpadding="0" cellspacing="5" style="table-layout: fixed; width:100%" width="100%">
  <tbody>
    <tr>
      <td>
        <table style="width: 100%;text-align:center;">
          <tbody>
            <tr>
              <td>
                <p>SOCIÉTÉS: 230</p>
              </td>
            </tr>
            <tr>
              <td><a class="toggler" data-prod-cat="1" href="#">+ En savoir plus</a></td>
            </tr>
            <tr class="cat1" style="display:none">
              <td>Part CAC 40 : 40</td>
            </tr>
            <tr class="cat1" style="display:none">
              <td>Part Filiales +100MK€: 190</td>
            </tr>
          </tbody>
        </table>
      </td>
      <td>
        <table style="width: 100%;text-align:center;">
          <tbody>
            <tr>
              <td>
                <p>CONTACTS: 16 700</p>
              </td>
            </tr>
            <tr>
              <td>
                <a class="toggler" data-prod-cat="1" href="#">+ En savoir plus</a></td>
            </tr>
            <tr class="cat1" style="display:none">
              <td>Part CAC 40 : 10 000</td>
            </tr>
            <tr class="cat1" style="display:none">
              <td>Part Filiales +100MK€: 6 700</td>
            </tr>
          </tbody>
        </table>
      </td>
      <td>
        <p>EMAIL NOMINATIF</p>
      </td>
      <td>
        <p>OPT OUT</p>
      </td>
      <td>
        <p>LIGNES DIRECTES/MOBILES</p>
      </td>
    </tr>
  </tbody>
</table>

【讨论】：

你知道我的代码是否可以垂直对齐我的文本。我试图将它们放在同一行中以获得更和谐的方面
不知道你所说的垂直对齐我的文本是什么意思，请给我一个例子。
我希望每个单元格中的标题处于同一级别，因为现在未隐藏的文本不会出现“在同一行”；有些比其他的更上/下
您的意思是例如：“SOCIÉTÉS: 230”和“+ En savoir plus”在同一行？

【解决方案3】：

根据您的代码，我猜您正在尝试使用data-prod-cat 属性来知道需要出现哪个块。

但是在您的两个块中都有data-prod-cat="1"，这意味着您将在每个操作中激活两个块。

尝试将第二个块属性更改为：

data-prod-cat="2"

您还需要更新其他 <tr> 中的 css 类

【讨论】：