排序多个实例的jQuery交互，每个实例具有唯一的ID

Question

我正在扩展过去是一个非常简单的jQuery手风琴脚本，并且我已经制作了多个手风琴可以放在页面上，拥有唯一的ID。麻烦的是，与手风琴功能的任何交互（展开其中一个面板而折叠所有其他面板，或使用展开/折叠所有链接）会影响页面上的所有手风琴。我不知道如何让每个人“介意自己的事情”。

此外（这是一个更大的问题），它完全与Internet Explorer不兼容。这真的很奇怪。我认为jQuery应该是跨浏览器的防弹...？

总之，这里的HTML标记，然后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> 

和这里的到可以在行动中被视为一个链接（只要你不” t使用IE）：http://www.tomryandesign.com/dev/accordion.html

任何帮助将不胜感激。

Answer 1

我认为你问题的关键在于选择你想关闭的手风琴部分。您有：

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

当你这样做的代码，你是选择所有的手风琴节这服从这种模式，不只是那些当前手风琴控制。您需要将选择范围限制在当前手风琴的上下文中。

相反的：

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

使用的东西沿着线：

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