排序多個實例的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')