Сортировка jQuery-взаимодействий нескольких экземпляров, каждый с уникальным идентификатором - PullRequest
Новая
       6

Сортировка jQuery-взаимодействий нескольких экземпляров, каждый с уникальным идентификатором

3 голосов
/ 02 октября 2010

Я подробно остановился на том, что раньше было довольно простым скриптом аккордеона jQuery, и сделал так, чтобы на странице можно было разместить несколько аккордеонов, каждый со своим уникальным идентификатором.Проблема в том, что любое взаимодействие с функциональностью аккордеона (расширение одной из панелей при свертывании всех остальных или использование ссылки «Развернуть / Свернуть все») влияет на ВСЕ аккордеоны на странице.Я не знаю, как заставить каждого «заниматься своим делом».

Кроме того (и это большая проблема), он полностью несовместим с 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

Любая помощь будет принята с благодарностью.

1 Ответ

2 голосов
/ 02 октября 2010

Я думаю, что ключ к вашей проблеме в выборе того, какие секции аккордеона вы хотите закрыть.У вас есть: 

 $('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')
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...