jQuery accordion, faites défiler jusqu'au début de l'cliqué sur l'onglet vers le haut, ne fonctionne pas si développée onglet est au-dessus de l'être cliqué?

Eu un peu d'un problème avec l'obtention de mon accordéon jquery pour faire ce que je veux.

Je veux toujours l'onglet qui est en train d'être cliqué pour être défile à une quantité fixe de pixels à partir du haut de la page, et j'ai un peu eu de travail. Mais à chaque fois que l'onglet actif est au-dessus de l'onglet cliqué et si la page défile vers le bas un peu, la partie supérieure et une partie du contenu de l'cliqué sur l'onglet défilement jusqu'à passé le haut de la page.

C'est ce que j'ai:

$(function() {
    $("#accordion").accordion({
        autoHeight: false,
        collapsible: true,
        heightStyle: "content",
        active: 0,
        animate: 300
    });
    $('#accordion h3').bind('click',function(){
        theOffset = $(this).offset();
        $('body,html').animate({ 
            scrollTop: theOffset.top - 100 
        });
    });
});

Voici un violon pour illustrer mon problème,

Par exemple, ont "section 2" élargi, faites défiler vers le bas et cliquez sur "section 3" de l'onglet et tout défile sur la page, d'autres moyen de contourner cela fonctionne bien.

Et si la fermeture de l'onglet actif avant d'en ouvrir un nouveau, il fonctionne aussi très bien donc je suppose que cela a quelque chose à la hauteur de l'effondrement de l'onglet qui bousille la faire défiler vers le haut fonction!?

Espère que quelqu'un peut aider, j'ai probablement l'approche de cette façon le mal. J'ai un peu ne sais vraiment pas ce que je suis en train de faire comme mon jquery compétences sont limitées à une coupe de base n' coller à la compréhension! ^^

Merci d'avance et toute l'aide et les pointeurs de zone de plus de alors bienvenue! 🙂

Acclamations

OriginalL'auteur Andreas | 2013-10-26

16

Oui, c'est la hauteur de l'onglet, c'est arriver fermé c'est ça la cause du problème.

Le haut de l'cliqué h3 changements immédiatement après, en raison de l'effondrement d'un onglet au-dessus d'elle.

Une solution de contournement (mal peut-être), est de déclencher le défilement de l'animation après l'effondrement de l'animation des finitions, c'est à dire si l'effondrement de l'animation est définie 300ms, commencer le défilement de l'animation après 310ms ou quelque chose.
```
$(function() {
        $("#accordion").accordion({
            autoHeight: false,
            collapsible: true,
            heightStyle: "content",
            active: 0,
            animate: 300 //collapse will take 300ms
        });
        $('#accordion h3').bind('click',function(){
            var self = this;
            setTimeout(function() {
                theOffset = $(self).offset();
                $('body,html').animate({ scrollTop: theOffset.top - 100 });
            }, 310); //ensure the collapse animation is done
        });
});
```
Mis À Jour Le Violon

OUI! 😀 Merci beaucoup, j'ai essayé de retarder le défilement réel événement, mais sans la chance, mais qui fonctionne! Excellent!
Les bonnes œuvres! Ma seule question est: pourquoi faites-vous var self = this;? J'ai essayé de le faire avec var theOffset = $(this).offset(); et ça ne fonctionne pas. Aucune idée pourquoi?
Parce que la valeur de this à l'intérieur de la setTimeout de rappel n'est pas ce qu'il est à l'extérieur.
La droite. Je suis bête. Merci!!!!
merci beaucoup à la recherche pour une heure

OriginalL'auteur techfoobar

Vous pouvez ajouter une fonction activée à l'accordéon. De cette façon, il déclenche une fois de l'autre afficher/masquer les animations ont terminé.

$(function() {
    $("#accordion").accordion({
        autoHeight: false,
        collapsible: true,
        heightStyle: "content",
        active: 0,
        animate: 300,
        activate: function(event, ui) {
            try {
                theOffset = ui.newHeader.offset();
                $('body,html').animate({ 
                    scrollTop: theOffset.top 
                });
            } catch(err){}
        }
    });
});

le try catch est nécessaire, comme l'interface utilisateur.newHeader est pas défini si vous êtes l'effondrement d'un open accordéon onglet.

OriginalL'auteur RedEight

Vous devez vous connecter pour publier un commentaire.