[英]Offset on JQuery accordion content when click on accordion header
當用戶單擊他的 header 時,我想使用offset
和animate
滾動到accordion
的內容。 住在這里。
我的頁面上有 30 個手風琴,所以我嘗試了這個:
$(".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);
});
但是沒有用,我也沒有看到控制台錯誤。 我試圖在 function 上插入一個alert
示例,以顯示是否是scrolltop
功能的問題,但警報也沒有用,所以我認為單擊 function 不起作用。
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>
您的代碼正在運行。 但請記住,您應該在渲染 dom 元素之后運行 JavaScript 代碼。 或使用on
進行實時綁定。 改變你的代碼是這樣的:
$("html").on("click", ".ui-accordion", function(){
var $acc = $(this);
$('html,body').animate({
scrollTop: $acc.offset().top},
500);});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.