Question

我有以下HTML代码（使用jquery 2.1.1和bootstrap）

<div class="panel-group" id="accordion">
            <div class="panel panel-default">
               <div class="panel-heading">
                  <h4 class="panel-title" >
                     <a value="Scroll" id="scroll" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                     Documentos de Recolha de Dados
                     </a>
                  </h4>
               </div>
               <div id="collapseOne" class="panel-collapse collapse">
                  <div class="panel-body">
                     <div class="row">
                     <div class="col-md-4"><a href="docs/recdados/chk_act_dados.pdf"><img src="img/doc-pdf.png" alt="Download" class="img-rounded"><p>Lista de Documentos Necessários &#40;316KB&#41;</p></a></div>
                     <div class="col-md-4"><a href="docs/recdados/siie_colheita_de_dados_358.pdf"><img src="img/doc-pdf.png" alt="Download" class="img-rounded"><p>Recolha Dados SIIE &#40;221KB&#41;</p></a></div>
                     <div class="col-md-4"><a href="docs/recdados/Admissao_Ficha_de_saude.pdf"><img src="img/doc-pdf.png" alt="Download" class="img-rounded"><p>Ficha de Sa&uacute;de &#40;850KB&#41;</p></a></div>
                  </div>
               </div>
            </div>
         </div>
         <div class="panel panel-default">
            <div class="panel-heading">
               <h4 class="panel-title">
                  <a value="Scroll" id="scroll" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                  Regulamentos e Estatutos do CNE
                  </a>
               </h4>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse">
               <div class="panel-body">
                  <div class="row">
                     <div class="col-md-4"><a href="docs/estatutos__do_cne.pdf"><img src="img/doc-pdf.png" alt="Download" class="img-rounded"><p>Estatutos do CNE &#40;113KB&#41;</p></a></div>
                     <div class="col-md-4"><a href="docs/regulamento_geral_do_cne.pdf"><img src="img/doc-pdf.png" alt="Download" class="img-rounded"><p>Regulamento Geral CNE &#40;592KB&#41;</p></a></div>
                     <div class="col-md-4"><a href="docs/regulamento_uniformes_do_cne.pdf"><img src="img/doc-pdf.png" alt="Download" class="img-rounded"><p>Regulamento do Uniforme CNE &#40;4MB&#41;</p></a></div>
                  </div>
               </div>
            </div>
         </div>
         <div class="panel panel-default">
            <div class="panel-heading">
               <h4 class="panel-title">
                  <a value="Scroll" id="scroll" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
                  Actividades de Agrupamento
                  </a>
               </h4>
            </div>
            <div id="collapseThree" class="panel-collapse collapse">
               <div class="panel-body">
                  <div class="row">
                     <div class="col-md-4"><a href="docs/planos/actividades_de_agrupamento_2014_2015.pdf"><img src="img/doc-pdf.png" alt="Download" class="img-rounded"><p>Plano de Actividades Agrupamento &#40;451KB&#41;</p></a></a></div>
                     <div class="col-md-4"><a href="docs/planos/actividades_de_Lobitos.pdf"><img src="img/doc-pdf.png" alt="Download" class="img-rounded"><p>Plano de Actividades 1&ordf; Sec&ccedil;&atilde;o &#40;440KB&#41;</p></a></a></div>
                     <div class="col-md-4"><a href="docs/planos/actividades_de_exploradores.pdf"><img src="img/doc-pdf.png" alt="Download" class="img-rounded"><p>Plano de Actividades 2&ordf; Sec&ccedil;&atilde;o &#40;202KB&#41;</p></a></a></div></div>
                  </div>
                  <div class="row">
                     <div class="col-md-4"><a href="docs/planos/actividades_de_Pioneiros.pdf"><img src="img/doc-pdf.png" alt="Download" class="img-rounded"><p>Plano de Actividades 3&ordf; Sec&ccedil;&atilde;o &#40;443KB&#41;</p></a></a></div>
                     <div class="col-md-4"></div>
                     <div class="col-md-4"></div></div>
                  </div>
               </div>


         <div class="panel panel-default">
            <div class="panel-heading">
               <h4 class="panel-title">
                  <a value="Scroll" id="scroll" data-toggle="collapse" data-parent="#accordion" href="#collapseFwor">
                  Cancioneiro 358
                  </a>
               </h4>
            </div>
            <div id="collapseFwor" class="panel-collapse collapse">
               <div class="panel-body">
                  <div class="row">
                     <div class="col-md-4"></a></div>
                     <div class="col-md-4"><p>Cancioneiro = 1 Escuta</p><p>Encomendas para geral@agr358.cne-escutismo.pt</p><p>Entrege em mão na sede do 358</p></div>
                     <div class="col-md-4"></div>
                  </div>
               </div>
            </div>
         </div>
      </div>

以及下面的adsal js

$(document).ready(function() {
    $('#scroll').click(function() {
        $('html, body').animate({
            scrollTop: '+=400'
        }, 1000);
    });
});

出于某种原因，第一个崩溃块在向下滚动页面时起作用，但其他崩溃块不会触发js。

我做错了什么。提前致谢

Answer 1

html must be unique中的ID。您需要class='scroll'而不是ID，然后使用$(".scroll")

Answer 2

ID必须是唯一的。将您的标签ID属性（id =＆＃34;滚动＆＃34;）更改为类（class =＆＃34;滚动＆＃34;）它应该可以工作

并将您的选择器 $（＆＃39; #roll＆＃39;）更改为 $（＆＃39; .scroll＆＃39;）

<a> not trigering my .js</a>

2 个答案: