对多个实例的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>

这里有一个链接，可以在行动中查看它（只要你不使用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')