Question

就像标题所述，我正在创建一个＆＃34; FAQ＆＃34;在我的网站中，人们可以点击一个字形并显示文字。这是我的代码

<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>

我想要一个<li>，当点击时，隐藏另一个</li> <li>在同一个<ul>

1 个答案: