javascript - 我希望一个 <li> 在单击时隐藏另一个 <li> 在同一个 <ul>

Question

如标题所述，我在我的网站上创建了一个“常见问题解答”部分，人们可以在其中单击一个字形图标，它会显示文本。这是我的代码

<div class="tab-content">
    <div id="home" class="tab-pane fade in active ">
        <h3>Product Specs</h3>
        <ul id="questions">
            <li><span id="symbol"><i class="fa fa-gg"></i></span> Do I have to use one of your templates for my vinyl banner?</li>
            <li id="subtext">While we have created templates for you to use as a starting point,  if you don’t want to use them and would like to design your own banner, you have three additional options. First, you can choose the blank template and start designing from scratch on our design tool. Second, you can upload your own files to make a banner. Lastly, you can contact us and have us design something for you.</li>
        </ul>
    </div>
</div>

当用户点击 <span id="symbol">它将显示/隐藏

<li id="subtext">

Answer 1

您可以简单地使用:

$("li:nth-child(odd) span#symbol").click(function () {
  $(this).closest("li").next("li").toggle();
});

如果您使用多个 id，则存在根本性错误。 id 应该是唯一的。

所以我的建议是，请将它们改为类。通过这种方式，如果你这样做，你可以做类似的事情:

$(function () {
  $(".subtext").hide();
  $("li:nth-child(odd) .symbol").click(function () {
    $(this).closest("li").next("li").toggle();
  });
});

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div class="tab-content">
  <div id="home" class="tab-pane fade in active ">
    <h3>Product Specs</h3>
    <ul id="questions">
      <li><span class="symbol"><i class="fa fa-gg"></i></span> Do I have to use one of your templates for my vinyl banner?</li>
      <li class="subtext">While we have created templates for you to use as a starting point,  if you don’t want to use them and would like to design your own banner, you have three additional options. First, you can choose the blank template and start designing from scratch on our design tool. Second, you can upload your own files to make a banner. Lastly, you can contact us and have us design something for you.</li>
      <li><span class="symbol"><i class="fa fa-gg"></i></span> Do I have to use one of your templates for my vinyl banner?</li>
      <li class="subtext">While we have created templates for you to use as a starting point,  if you don’t want to use them and would like to design your own banner, you have three additional options. First, you can choose the blank template and start designing from scratch on our design tool. Second, you can upload your own files to make a banner. Lastly, you can contact us and have us design something for you.</li>
      <li><span class="symbol"><i class="fa fa-gg"></i></span> Do I have to use one of your templates for my vinyl banner?</li>
      <li class="subtext">While we have created templates for you to use as a starting point,  if you don’t want to use them and would like to design your own banner, you have three additional options. First, you can choose the blank template and start designing from scratch on our design tool. Second, you can upload your own files to make a banner. Lastly, you can contact us and have us design something for you.</li>
      <li><span class="symbol"><i class="fa fa-gg"></i></span> Do I have to use one of your templates for my vinyl banner?</li>
      <li class="subtext">While we have created templates for you to use as a starting point,  if you don’t want to use them and would like to design your own banner, you have three additional options. First, you can choose the blank template and start designing from scratch on our design tool. Second, you can upload your own files to make a banner. Lastly, you can contact us and have us design something for you.</li>
      <li><span class="symbol"><i class="fa fa-gg"></i></span> Do I have to use one of your templates for my vinyl banner?</li>
      <li class="subtext">While we have created templates for you to use as a starting point,  if you don’t want to use them and would like to design your own banner, you have three additional options. First, you can choose the blank template and start designing from scratch on our design tool. Second, you can upload your own files to make a banner. Lastly, you can contact us and have us design something for you.</li>
      <li><span class="symbol"><i class="fa fa-gg"></i></span> Do I have to use one of your templates for my vinyl banner?</li>
      <li class="subtext">While we have created templates for you to use as a starting point,  if you don’t want to use them and would like to design your own banner, you have three additional options. First, you can choose the blank template and start designing from scratch on our design tool. Second, you can upload your own files to make a banner. Lastly, you can contact us and have us design something for you.</li>
      <li><span class="symbol"><i class="fa fa-gg"></i></span> Do I have to use one of your templates for my vinyl banner?</li>
      <li class="subtext">While we have created templates for you to use as a starting point,  if you don’t want to use them and would like to design your own banner, you have three additional options. First, you can choose the blank template and start designing from scratch on our design tool. Second, you can upload your own files to make a banner. Lastly, you can contact us and have us design something for you.</li>
    </ul>
  </div>
</div>