javascript - 单击 Accordion 标题时 JQuery Accordion 内容的偏移

Question

当用户单击其标题时，我想使用 offset 和 animate 滚动到 accordion 的内容。 Live here .

我的页面上有 30 个 Accordion ，所以我尝试了这个:

  $(".ui-accordion").on("click",function(){
       var $acc = $(this);
        $('html,body').animate({
    scrollTop: $acc.offset().top
  }, 500);
    });

还有这个:

  $(".ui-accordion-header").on("click",function(){
       var $acc =  $(this).next(".ui-accordion-content");
        $('html,body').animate({
    scrollTop: $acc.offset().top
  }, 500);
    });

但是没有用，我也没有看到控制台错误。我尝试在函数上插入一个 alert 示例来显示是否是 scrolltop 功能的问题，但alert也不起作用，所以我认为点击功能不工作。

其中一项的 HTML 结构:

<div class="column">
<div class="text-box">
<h3>Titulación</h3>
<p>Información y documentación / Comunicación Audiovisual</p>
<h3>Puesto a desempeñar</h3>
<p>Gestor documental/ Editor medios audiovisuales</p>
<h3>Tipo de beca</h3>
<p>Entidad sin ánimo de lucro: 1 año media jornada sin compromiso</p>
</div>
<div id="accordion" class="ui-accordion ui-widget ui-helper-reset" role="tablist">
  <h3 class="ui-accordion-header ui-corner-top ui-accordion-header-collapsed ui-corner-all ui-state-default ui-accordion-icons" role="tab" id="ui-id-1" aria-controls="ui-id-2" aria-selected="false" aria-expanded="false" tabindex="0"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>Más información</h3>
  <div class="ui-accordion-content ui-corner-bottom ui-helper-reset ui-widget-content" id="ui-id-2" aria-labelledby="ui-id-1" role="tabpanel" aria-hidden="true" style="display: none; height: 518px;">
  <h3>Breve descripción del puesto</h3>
<p>Recopilación y clasificación de material digitalizado del archivo de la Fundación/ Edición audiovisual</p>
<h3>Empresa</h3>
<p>Fundación Centro de Estudios Presidente Rodríguez Ibarra (FUNDCERI)</p>
<h3>Localización del puesto</h3>
<p>Sede Fundación</p>
<h3>Horario de trabajo</h3>
<p>Mañana</p>
<div class="boton-proyecto-inicia"><a class="boton-solicitudes" title="Inscripción Premios Emprendimiento" href="https://www.fundacioncb.es/inscripcion-premios-emprendimiento/">Inscribirse</a></div>
  </div>
</div>
</div>

Answer 1

您的代码正在运行。 但请记住，您应该在 dom 元素渲染之后运行 JavaScript 代码。或使用 on 进行实时绑定(bind)。 更改您的代码，如下所示:

 $("html").on("click", ".ui-accordion", function(){
   var $acc = $(this);
   $('html,body').animate({
      scrollTop: $acc.offset().top}, 
    500);});