Lien pour ouvrir jQuery accordéon

Question

Je suis en train d'ouvrir un div accordéon à partir d'un lien externe. Je vois la « navigation: true » option, mais je ne suis pas sûr de savoir comment le mettre en œuvre. Donnez-vous chaque div un id et appelez le lien comme celui-ci? http://domain.com/link#anchorid

Je suis nouveau à jQuery donc garder avec moi. Voici le code que je utilise si ça aide.

<script type="text/javascript">
    $(function(){
        $("#accordion").accordion({ header: "h2", autoHeight: false, animated: false, navigation: true });
         });
    </script>
<div id="accordion">

<div>
    <h2><a href="#">Services</a></h2>
    <div class="services">
    <p>More information about all of these services</p>
    </div>
</div>

Answer 1

L'option de navigation n'est pas pour l'activation du panneau. Il est pour indiquer à l'utilisateur où ils sont.

En utilisant le code html simplifiée:

<div id="accordion">

    <div>
        <h2><a href="#services">Services</a></h2>
        <p>More information about all of these services</p>
    </div>

    <div>
        <h2><a href="#about">About</a></h2>
        <p>About us</p>
    </div>

</div>

Vous mettez l'ID unique dans le lien hypertexte dans le titre

Alors le jQuery (simplifié):

<script type="text/javascript">
    $(function(){
        $("#accordion").accordion({ header: "h2", navigation: true });
     });
</script>

La « navigation: true » vous permettra d'aller www.site.com/#about ce qui rend le panneau « de » sélectionné. Pour l'activation, il y a deux façons. Peut-être d'une façon est de saisir une chaîne de requête et de le mettre dans le jQuery.

Avec C #

$("#accordion").accordion("activate", '<%= Request.QueryString["id"] %>');

Avec PHP

$("#accordion").accordion("activate", '<?php echo $_GET['id']; ?>');

Ce qui vous permettra de spécifier le panneau pour ouvrir par www.site.com?id=2

Answer 2

L'option navigation que beaucoup de ces réponses se réfèrent de WAS dépréciée dans l'interface utilisateur jQuery 1,9 et supprimé à 1,10. La raison invoquée était:

  

Cette fonctionnalité a été désactivée par défaut et est seulement l'une des nombreuses façons que vous pourriez vouloir déterminer quel panneau pour activer l'initialisation. En tant que tel, nous avons cela en faveur dépréciée de simplement gérer la logique à l'extérieur de l'accordéon et un réglage approprié l'option active.

en utilisant les codeurs des versions plus récentes de jQuery UI devront écrire leur propre code pour gérer cette fonction.

Pour mon site, j'ai accompli cela avec une déclaration de switch JavaScript juste avant la balise </body>. (Je ne suis pas un codeur expérimenté, pour que les autres doivent se sentir libres d'améliorer cette réponse.)

<script>
function switchToPanel(panel){
    var index = -1;
    switch (panel) {
        case "preschool":
            index = 0;
            break;
        case "kindergarten":
            index = 1;
            break;
        case "1st":
            index = 2;
            break;
        default:
            console.warn("Cannot switch to panel " + panel);
    }
    jQuery('#mathAccordion').accordion({active: index});
}

jQuery().ready(function() {
    if (window.location.hash) { //window.location.hash gets the anchor location out of the URL
        var target = window.location.hash.replace('#', ''); //remove the #
        switchToPanel(target);
    }
});
</script>

Voici le code HTML correspondant:

<div class="accordion" id="mathAccordion">
    <h1>Preschool</h1>
    <div class="accordionFold">Preschool content</div>
    <h1>Kindergarten</h1>
    <div class="accordionFold">Kindergarten content</div>
    <h1>1st Grade</h1>
    <div class="accordionFold">First grade content</div>
</div>

Answer 3

Hah, craqué.

Utilisez la méthode get php. Cependant, il y a une erreur dans celle ci-dessus. $ ( "# Accordéon") accordéon ( "activer", '');.

le code php doit les guillemets supprimés.

fonctionne un régal maintenant.

Vive

Ian

Answer 4

Avec un langage côté serveur, vérifiez la requête pour que #ancre et l'utiliser pour remplir la déclaration d'activation.

Extrait de quelque chose que je viens de travailler sur:

$("#search_forms").accordion("activate", "{$this->open_form}");

Modifier

Je ne peux pas relier directement à la méthode d'accordéon texte de présentation, mais vous se rapproche:

http://docs.jquery.com/UI/Accordion#methods

Answer 5

Cela a fonctionné pour moi ...

var hash = window.location.hash;
$("#accordion").accordion("activate", hash);

Answer 6

Cela a fonctionné pour moi.

<script>
$(function() {
    $( "#accordion" ).accordion({
        active: false,
        collapsible: true,
        heightStyle: "content",
        navigation: true,
        header: ".menuitem"
     });

    var hash = window.location.hash;
    var anchor = $('a[href$="'+hash+'"]');
    if (anchor.length > 0){
        anchor.click();
    }
});
</script>

et le code html ...

<div id="accordion">
        <h3 class="menuitem"><a href="#tab1">Tab1</a></h3>
        <div>
            More data....
        </div>
</div>

Answer 7

$("a").click(function(event){
    var hash = window.location.hash;
    $("#accordion").accordion("activate", hash);
});

cela fonctionne avec jquery 1.8.3 et 1.9.1 jQueryUI mais na pas semblent travailler avec jQueryUI 1.10.0

ne sais pas pourquoi ...