Tri des interactions jQuery de plusieurs instances, chacune avec des ID uniques

Question

Je développe ce qui était un script d'accordéon jQuery assez simple, et j'ai fait en sorte que plusieurs accordéons puissent être placés sur la page, chacun avec son propre ID unique. Le problème est que toute interaction avec la fonctionnalité accordéon (l'expansion d'un des panneaux tout en réduisant tous les autres, ou en utilisant le lien développer/réduire tout) affecte TOUS les accordéons sur la page. Je ne sais pas comment amener chacun à «s'occuper de ses affaires».

Aussi (et c'est un plus gros problème), il est complètement incompatible avec Internet Explorer. Ce qui est vraiment bizarre. Je pensais que jQuery était censé être pare-balles cross-browser ...?

Quoi qu'il en soit, voici le balisage HTML suivi de la fonction jQuery:

<h1>accordion 1</h1> 

<div class="ui-accordion"> 
    <div class="expand"></div> 
    <div class="icon-24-pencilPaper"><a href="#1">panel 1a</a><span onclick="javascript:alert('hello');"></span></div> 
    <div class="ui-accordion-content"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque scelerisque risus mauris. Nullam lorem eros, sollicitudin ut rutrum in, sollicitudin tristique nisi. Mauris euismod dui amet. 
    </div> 
    <div class="icon-24-binoculars"><a href="#2">panel 2a</a><span onclick="javascript:alert('hello');"></span></div> 
    <div class="ui-accordion-content"> 
     Nullam laoreet imperdiet felis et faucibus. Aenean vitae iaculis mauris. Quisque semper semper nunc, eu cursus tortor sagittis eget. Etiam vel condimentum velit. Vivamus mollis laoreet amet. 
    </div> 
    <div class="icon-24-person"><a href="#3">panel 3a</a><span onclick="javascript:alert('hello');"></span></div> 
    <div class="ui-accordion-content"> 
     Proin sit amet nunc quis eros facilisis pulvinar. Morbi scelerisque tellus vel nisl mollis pretium. Maecenas sagittis, leo eget adipiscing iaculis, sapien arcu ultrices velit, et auctor sed. 
    </div> 
</div> 

<h1>accordion 2</h1> 

<div class="ui-accordion"> 
    <div class="expand"></div> 
    <div class="icon-24-arrowUp"><a href="#4">panel 1b</a><span onclick="javascript:alert('hello');"></span></div> 
    <div class="ui-accordion-content"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque scelerisque risus mauris. Nullam lorem eros, sollicitudin ut rutrum in, sollicitudin tristique nisi. Mauris euismod dui amet. 
    </div> 
    <div class="icon-24-tools"><a href="#5">panel 2b</a><span onclick="javascript:alert('hello');"></span></div> 
    <div class="ui-accordion-content"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque scelerisque risus mauris. Nullam lorem eros, sollicitudin ut rutrum in, sollicitudin tristique nisi. Mauris euismod dui amet. 
    </div> 
    <div class="icon-24-question"><a href="#6">panel not 2b</a><span onclick="javascript:alert('hello');"></span></div> 
    <div class="ui-accordion-content"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque scelerisque risus mauris. Nullam lorem eros, sollicitudin ut rutrum in, sollicitudin tristique nisi. Mauris euismod dui amet. 
    </div> 
</div> 

-

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 

<script type="text/javascript"> 
<!-- 
$(document).ready(function(){ 
    // append classes and id's 
    $('html').find('.ui-accordion').each(function(i) { 
     $(this).attr('id', 'accordion-' + (i+1)); 
    }); 
    $('html').find('.expand').each(function(i) { 
     $(this).attr('id', 'expand-collapse-' + (i+1)); 
    }); 
    $('div[class^="icon-"]').prepend('<span class="ui-icon"></span>').find('span[onclick]').addClass('seeAll').html('see all'); 
    $('div[class^="icon-"] a').addClass('title').prepend('<span class="divider"></span><span class="icon"></span>'); 
    $('div[class^="icon-"]').addClass('ui-accordion-header').addClass('ui-state-default').find('.ui-icon').addClass('ui-icon-triangle-1-e'); 
    $('div[class^="icon-"]:first').removeClass('ui-state-default').addClass('ui-state-active').find('.ui-icon').removeClass('ui-icon-triangle-1-e').addClass('ui-icon-triangle-1-s'); 
    $('.ui-accordion-content').addClass('ui-widget-content'); 
    $('.slidingColumns').each(function(i) { 
     $(this).attr('id', 'slidingColumns-' + (i+1)); 
    }); 
    $('.ui-tabs-panel ul').find('li').each(function(i) { 
     $(this).addClass('col-' + (i+1)); 
    }); 
    $('.ui-tabs-panel ul li a span:first-of-type').addClass('text'); 
    $('.ui-tabs-panel ul li a span:last-of-type').addClass('link').html('Read more &raquo;'); 

    // hide all sections 
    $('div[id^="accordion-"] div.ui-accordion-content').hide(); 
    // show the first section 
    $('div[id^="accordion-"] div.ui-accordion-content:first').show(); 
    // set state of expand/collapse button 
    $('div[id^="expand-collapse-"]').append('Expand All<span></span>'); 

    // actions taken upon clicking any ui-accordion-header 
    // set animation speed 
    var animationSpeed = 500; 
    // this var will be used to tell the system whether or not other sections will respond to clicking on a ui-accordion-header 
    var closeOthers = true; 
    // check which sections are open 
    function checkOpen() { 
     // how many sections are open 
     var openCount = $('div[id^="accordion-"] div.ui-accordion-content:visible').length; 
     // how many sections are there 
     var totalCount = $('div[id^="accordion-"] div.ui-accordion-content').length; 
     // set closeOthers var based on if there are 1 or 0 sections open 
     if (openCount < 2) closeOthers = true; 
     // change the text in the expand link based on if there are more or less than half of the sections open 
     if (openCount > totalCount/2) { 
      $('div[id^="expand-"]').html('Collapse'); 
     } 
     else { 
      $('div[id^="expand-"]').html('Expand'); 
     } 
     $('div[id^="expand-"]').append(' All<span></span>'); 
    } 
    $('div[id^="accordion-"] div.ui-accordion-header').click(function() { 
     // set checkSection to the section next to the ui-accordion-header clicked 
     var checkSection = $(this).next(); 
     // if the section is open, close it, and call checkOpen 
     if(checkSection.is(':visible')) { 
      checkSection.slideUp(animationSpeed, checkOpen); 
      $(this).removeClass('ui-state-active').addClass('ui-state-default').find('.ui-icon').removeClass('ui-icon-triangle-1-s').addClass('ui-icon-triangle-1-e'); 
      return false; 
     } 
     // if the section is closed and closeOthers is true, close all other open sections 
     else { 
      if (closeOthers) { 
       $('div[id^="accordion-"] div.ui-accordion-content:visible').slideUp(animationSpeed); 
       $('.ui-accordion-header').removeClass('ui-state-active').addClass('ui-state-default').find('.ui-icon').removeClass('ui-icon-triangle-1-s').addClass('ui-icon-triangle-1-e'); 
      } 
      // open the section and call checkOpen 
      checkSection.slideDown(animationSpeed, checkOpen); 
      $(this).removeClass('ui-state-default').addClass('ui-state-active').find('.ui-icon').removeClass('ui-icon-triangle-1-e').addClass('ui-icon-triangle-1-s'); 
      return false; 
     } 
    }); 
    // actions taken upon clicking the expand link 
    $('div[id^="expand-"]').click(function() { 
     // if the expand link's text is 'expand all', set closeOthers to false, open all sections and call checkOpen 
     if ($(this).hasClass('expand')) { 
      closeOthers = false; 
      $('div[id^="accordion-"] div.ui-accordion-content').slideDown(animationSpeed, checkOpen); 
      $('.ui-accordion-header').removeClass('ui-state-default').addClass('ui-state-active').find('.ui-icon').removeClass('ui-icon-triangle-1-e').addClass('ui-icon-triangle-1-s'); 
      $(this).removeClass('expand').addClass('collapse'); 
     } 
     // if the expand link's text is 'collapse all', set closeOthers to true, hide all sections, and call checkOpen 
     else if ($(this).hasClass('collapse')) { 
      closeOthers = true; 
      // the 1 prevents nasty flickering in some browsers 
      $('div[id^="accordion-"] div.ui-accordion-content').slideUp(animationSpeed, checkOpen); 
      $('.ui-accordion-header').removeClass('ui-state-active').addClass('ui-state-default').find('.ui-icon').removeClass('ui-icon-triangle-1-s').addClass('ui-icon-triangle-1-e'); 
      $(this).removeClass('collapse').addClass('expand'); 
     } 
     return false; 
    }); 
}); 
//--> 
</script> 

Et voici un lien où il peut être vu en action (tant que vous n » t utiliser IE): http://www.tomryandesign.com/dev/accordion.html

Toute aide serait grandement appréciée.

Answer 1

Je pense que la clé de votre problème réside dans la sélection des sections d'accordéon que vous voulez fermer. Vous avez:

$('div[id^="accordion-"] div.ui-accordion-content:visible').slideUp(animationSpeed); 

Quand vous faites ce code, vous sélectionnez toutes les sections de l'accordéon qui obéissent à ce schéma, pas seulement ceux pour le contrôle de l'accordéon en cours. Vous devez limiter la sélection au contexte de l'accordéon actuel.

Au lieu de:

$('div[id^="accordion-"] div.ui-accordion-content:visible') 

Utilisez quelque chose le long des lignes de:

$(this).parent().children('div[id^="accordion-"] div.ui-accordion-content:visible')