jquery ui accordion - plusieurs accordéons développer/réduire tous les problèmes relatifs au style de

Je suis d'essayer de créer un accordéon où je peux développer/réduire toutes les sections avec un seul clic. J'ai également besoin de la capacité pour l'utilisateur d'ouvrir et de fermer les sections ayant 0-n sections ouvertes en même temps. À l'aide de plusieurs discussions ici sur stackoverflow et sur jquery forums, voici la solution que j'ai trouvé:
J'ai mis en place chaque section possède son propre accordéon, où chacune est définie à réductible = true.

<html>
<head>
<title>Accordion Test</title>
<script type="text/javascript" src="../scripts/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../scripts/jquery-ui-1.8.4.custom.min.js"></script>
<link rel="stylesheet" href="../_templates/css/jquery-ui-1.8.6.custom.css"  type="text/css" />
<link rel="stylesheet" href="../_templates/css/jquery.ui.accordion.css" type="text/css" />
</head>
<body>
<a onClick="expandAll()">Expand All</a>
<br>
<a onClick="collapseAll()">Collapse All</a>
<div id="accordion1" class="accord">
<h5><a href="#">section 1</a></h5>
<div>
section 1 text  
</div>
</div>
<!-- orders section -->
<div id="accordion2" class="accord">
<h5><a href="#">section 2</a></h5>
<div>
section 2 text  
</div>
</div>
<!--  section 3 -->
<div id="accordion3" class="accord">
<h5><a href="#">section 3</a></h5>
<div>
section 3 text  
</div>
</div>
<!-- section 4 -->
<div id="accordion4">
<h5><a href="#">section 4</a></h5>
<div>
section 4 text                  
</div>
</div>
</body>
</html>
<script type="text/javascript">
$(function() {
$('#accordion1').accordion({
header: 'h5',
collapsible: true,
autoHeight: false
});
});
$(function() {
$('#accordion2').accordion({
header: 'h5',
collapsible: true,
autoHeight: false,
active: false
});
});
$(function() {
$('#accordion3').accordion({
header: 'h5',
collapsible: true,
autoHeight: false,
active: false
});
});
$(function() {
$('#accordion4').accordion({
header: 'h5',
collapsible: true,
autoHeight: false,
active: false
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
})
function expandAll() {
alert("calling expandAll");
$("#accordion1, #accordion2, #accordion3, #accordion4")
.filter(":not(:has(.ui-state-active))")
.accordion("activate", 0);
}
function collapseAll() {
alert("calling collapseAll");
$("#accordion1, #accordion2, #accordion3, #accordion4")
.filter(":has(.ui-state-active)")
.accordion("activate", -1);
}
</script>

Le problème, je suis en cours d'exécution, c'est quand je clique sur l'en-tête d'une section, la section est effondré comme prévu, mais l'en-tête ont encore la "ui-state-focus" de la classe, jusqu'à ce que je clique ailleurs sur la page. Donc, ce que je vois dans l'interface utilisateur de l'en-tête de section fermée a la même couleur de fond que mon hover effet, jusqu'à ce que je clique ailleurs, et il se déplace vers la valeur " par défaut, elle n'est pas centrée couleur.

En outre, lorsque j'utilise l'Effondrement de Tout lien, tout ressemble beaucoup dans Firefox. Dans IE, la dernière section d'en-tête a la même planer au-focus coloration.

Des suggestions? Dois-je en quelque sorte besoin de la force de l'accordéon à perdre le focus quand il est fermé? Comment pourrais-je le réaliser?

Ce n'est pas la solution pour un accordéon. Dans l'exemple de plusieurs accordéons sont utilisés.

OriginalL'auteur tia | 2011-02-01

  1. 3

    Après la tentative de sur-monter mon jquery ui styles sur la page, et d'essayer de pirater le accordéon javascript pour supprimer l'interface utilisateur-etat-classe de mise au point, une solution simple est venu à la lumière.

    Parce que ma page affiche le comportement attendu lorsque je clique sur d'autre où sur la page, j'ai utilisé le flou() pour perdre le focus.

    $(document).ready(function() {
//forces lose focus when accordion section closed. IE and FF.
$(".ui-accordion-header").click(function(){
$(this).blur();
});
})

    Pour corriger l'effondrement de tous les sous IE, j'ai ajouté 1 ligne de mon collapseAll() la méthode.

    function collapseAll() {
alert("calling collapseAll");
$("#accordion1, #accordion2, #accordion3, #accordion4")
.filter(":has(.ui-state-active)")
.accordion("activate", -1);
$(".ui-accordion-header").blur();
}

    OriginalL'auteur tia

  2. 3

    Solution à mettre en œuvre accordéon avec tous les panneaux ouverts. Les panneaux sont statiques et ne peut pas être fermé.

    Ne pas initialiser accordéon div avec widget accordéon!

    $("#accordion").addClass("ui-accordion ui-widget ui-helper-reset")
.find('h3')
.addClass("current ui-accordion-header ui-helper-reset ui-state-active ui-corner-top")
.prepend('<span class="ui-icon ui-icon-triangle-1-s"/>')
.next().addClass("ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active");

    OriginalL'auteur jmav

  3. 2

    c'est ma réponse~ l'espoir de son aide

    pour de multiples ouvert, vous pouvez le faire comme ceci en utilisant l'INTERFACE utilisateur de jquery juste ajouter une des options beforeActivate:

    mon code ci-dessous:

    $( "#accordion" ).accordion({
header: "> div > h3",
autoHeight: false,
collapsible: true,
active: false,
beforeActivate: function(event, ui) {
//The accordion believes a panel is being opened
if (ui.newHeader[0]) {
var currHeader  = ui.newHeader;
var currContent = currHeader.next('.ui-accordion-content');
//The accordion believes a panel is being closed
} else {
var currHeader  = ui.oldHeader;
var currContent = currHeader.next('.ui-accordion-content');
}
//Since we've changed the default behavior, this detects the actual status
var isPanelSelected = currHeader.attr('aria-selected') == 'true';
//Toggle the panel's header
currHeader.toggleClass('ui-corner-all',isPanelSelected).toggleClass('accordion-header-active ui-state-active ui-corner-top',!isPanelSelected).attr('aria-selected',((!isPanelSelected).toString()));
//Toggle the panel's icon
currHeader.children('.ui-icon').toggleClass('ui-icon-triangle-1-e',isPanelSelected).toggleClass('ui-icon-triangle-1-s',!isPanelSelected);
//Toggle the panel's content
currContent.toggleClass('accordion-content-active',!isPanelSelected)    
if (isPanelSelected) { currContent.slideUp('fast'); }  else { currContent.slideDown('fast'); }
return false; //Cancels the default action
}
});

    reportez-vous à partir de :jQuery UI accordion qui maintient plusieurs sections ouvertes?

    et la fonction développer et réduire

    function accordion_expand_all()
{
var sections = $('#accordion').find("h3");
sections.each(function(index, section){
if ($(section).hasClass('ui-state-default') && !$(section).hasClass('accordion-header-active')) {
$(section).click();
}
});
}
function accordion_collapse_all()
{
var sections = $('#accordion').find("h3");
sections.each(function(index, section){
if ($(section).hasClass('ui-state-active')) {
$(section).click();
}
});
}

    c'est tout..

    Très belle solution! Comme elle! Good job!!!

    OriginalL'auteur Edwin Wong

  4. 0

    Vous pouvez essayer ce petit, léger plugin.

    Il aura peu d'options disponibles qui nous pouvons modifier selon nos besoins.

    URL: http://accordion-cd.blogspot.com/

    OriginalL'auteur Dharam Mali