Question

我试图尽可能减少尽可能多的代码并且不确定如何去做。我目前使用的代码有效，但它占用了大量的空间，我知道这可能比我现在的要小得多。如果你可以帮我指出一个很好的方向。

HTML（已更新）

    <p id="FAQ"><strong>Q1</strong>
    </p>
    <p class="ANS">A1</p>
    <p id="FAQ"><strong>Q2</strong>
    </p>
    <p class="ANS">A2</p>
    <p id="FAQ"><strong>Q3</strong>
    </p>
    <p class="ANS">A3</p>
    <p id="FAQ"><strong>Q4</strong>
    </p>
    <p class="ANS">A4</p>
    <p id="FAQ"><strong>Q5</strong>
    </p>
    <p class="ANS">A5</p>
    <p id="FAQ"><strong>Q6</strong>
    </p>
    <p class="ANS">A6</p>
    <p id="FAQ"><strong>Q7</strong>
    </p>
    <p class="ANS">A7</p>
    <p id="FAQ"><strong>Q8</strong>
    </p>
    <p class="ANS">A8</p>
    <p id="FAQ"><strong>Q9</strong>
    </p>
    <p class="ANS">A9</p>
    <p id="FAQ"><strong>Q10</strong>
        <p>
            <p class="ANS">A10</p>

CODE（已更新）

    $(document).ready(function() {
  $("[class*='ANS']").hide();
  $('[id*="FAQ"]').on('click', function() {
    $("[class*='ANS']").not($(this).next('p')).hide();
    $(this).next('p').toggle();
  });
 });

这是一个点击功能，可根据点击的内容隐藏/显示/切换。任何帮助将不胜感激。

编辑笔记：谢谢大家。我阅读了你的所有评论并修复了代码。再次感谢。

Answer 1

以下是对此的快速解决方法。如果您希望正确完成此操作，请为主<p>和内容<p>使用相同的类名。

要以正确的方式解决此问题，请参阅此demo。

＆＃13;

$(document).ready(function() {
  $("[class*='ANS']").hide();
  $('[id*="FAQ"]').on('click', function() {
    $("[class*='ANS']").not($(this).next('p')).hide();
    $(this).next('p').toggle();
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<p id="FAQ1"><strong>Q1</strong></p>
<p class="ANS1">A1</p>
<p id="FAQ2"><strong>Q2</strong></p>
<p class="ANS2">A2</p>
<p id="FAQ3"><strong>Q3</strong></p>
<p class="ANS3">A3</p>
<p id="FAQ4"><strong>Q4</strong></p>
<p class="ANS4">A4</p>
<p id="FAQ5"><strong>Q5</strong></p>
<p class="ANS5">A5</p>
<p id="FAQ6"><strong>Q6</strong></p>
<p class="ANS6">A6</p>
<p id="FAQ7"><strong>Q7</strong></p>
<p class="ANS7">A7</p>
<p id="FAQ8"><strong>Q8</strong></p>
<p class="ANS8">A8</p>
<p id="FAQ9"><strong>Q9</strong></p>
<p class="ANS9">A9</p>
<p id="FAQ_10"><strong>Q10</strong><p>
<p class="ANS_10">A10</p>

＆＃13;

Answer 2

这是一个更好的代码：

＆＃13;

$('.faq').click(function(){
  $('.ans').hide();
  $(this).next().show();
});

＆＃13;

.ans {
  display:none;
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="faq" id="FAQ1"><strong>Q1</strong>
    </p>
    <p class="ans ANS1">A1</p>
    <p class="faq" id="FAQ2"><strong>Q2</strong>
    </p>
    <p class="ans ANS2">A2</p>
    <p class="faq" id="FAQ3"><strong>Q3</strong>
    </p>
    <p class="ans ANS3">A3</p>
    <p class="faq" id="FAQ4"><strong>Q4</strong>
    </p>
    <p class="ans ANS4">A4</p>
    <p class="faq" id="FAQ5"><strong>Q5</strong>
    </p>
    <p class="ans ANS5">A5</p>
    <p class="faq" id="FAQ6"><strong>Q6</strong>
    </p>
    <p class="ans ANS6">A6</p>
    <p id="FAQ7"><strong>Q7</strong>
    </p>
    <p class="ans ANS7">A7</p>
    <p class="faq" id="FAQ8"><strong>Q8</strong>
    </p>
    <p class="ans ANS8">A8</p>
    <p class="faq" id="FAQ9"><strong>Q9</strong>
    </p>
    <p class="ans ANS9">A9</p>
    <p class="faq" id="FAQ_10"><strong>Q10</strong>
        <p>
            <p class="ans ANS_10">A10</p>

＆＃13;

Answer 3

您应该使用公共类来实现结果并使用各种DOM遍历方法来切换答案。

在这个示例中，我已经包装了Q＆amp;一个在容器div。

<div>
  <p class="FAQ"><strong>Q1</strong>
  </p>
  <p class="ANS">A1</p>
</div>

＆＃13;

$(function() {
  $(".FAQ").on('click', function() {
    $('.ANS').hide();
    $(this).closest('div').find('.ANS').toggle();
    ////You can also use .next()
    //$(this).next('.ANS').toggle();
  });
});

＆＃13;

.ANS {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <p class="FAQ"><strong>Q1</strong>
  </p>
  <p class="ANS">A1</p>
</div>
<div>
  <p class="FAQ"><strong>Q2</strong>
  </p>
  <p class="ANS">A3</p>
</div>

＆＃13;

Answer 4

你可以修改一下你的html，添加＆＃34; name＆＃34;属性，用于搜索具有该属性的所有项目。

然后，您将对元素执行动态验证：

＆＃13;

 $(document).ready(function () {

     /*hide all answers*/
     $("p[class*='ANS']").hide();
		
     /*to show a answer*/
     $("p[name*='FAQ']").click(function(e){
         
         var name = $(this).attr("name");
         
         var index = name.indexOf("FAQ") + 3;
         var number = name.substring(index , name.length);
         var selector = ".ANS"+number;
         var element = $(selector);
         var status = element.is(":visible");
         
         if(status){
         	element.hide();    
         }else{ 
         	element.toggle();
         }
         
     });
 });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p id="FAQ1" name="FAQ1"><strong>Q1</strong></p>
<p class="ANS1">A1</p>
<p id="FAQ2" name="FAQ2"><strong>Q2</strong></p>
<p class="ANS2">A2</p>
<p id="FAQ3" name="FAQ3"><strong>Q3</strong></p>
<p class="ANS3">A3</p>
<p id="FAQ4" name="FAQ4"><strong>Q4</strong></p>
<p class="ANS4">A4</p>
<p id="FAQ5" name="FAQ5"><strong>Q5</strong></p>
<p class="ANS5">A5</p>
<p id="FAQ6" name="FAQ6"><strong>Q6</strong></p>
<p class="ANS6">A6</p>
<p id="FAQ7" name="FAQ7"><strong>Q7</strong></p>
<p class="ANS7">A7</p>
<p id="FAQ8" name="FAQ8"><strong>Q8</strong></p>
<p class="ANS8">A8</p>
<p id="FAQ9" name="FAQ9"><strong>Q9</strong></p>
<p class="ANS9">A9</p>
<p id="FAQ_10" name="FAQ10"><strong>Q10</strong><p>
<p class="ANS_10">A10</p>

＆＃13;

尝试使用单击功能隐藏/显示/切换

4 个答案: