Как правильно сортировать несколько аккордеонов с помощью jQuery - PullRequest
Новая
       22

Как правильно сортировать несколько аккордеонов с помощью jQuery

6 голосов
/ 22 февраля 2011

Это моя первая публикация, поэтому, пожалуйста, дайте мне знать, если я не предоставлю достаточно информации.

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

Я также хочу, чтобы пользователи могли сортировать эти аккордеоны.То, как в данный момент настроена страница, пользователи могут сортировать аккордеон без проблем.

Когда пользователь переходит к сортировке аккордеонов, у меня есть скрипт, который закроет все существующие аккордеоны, сохранит их идентификаторы в массиве, а затем снова откроет их, когда пользователь завершит сортировку.Эта часть тоже работает нормально.

Проблема возникает, когда вы пытаетесь поместить раздел, который вы сортируете, между двумя ранее открытыми разделами.Похоже, что jQuery не может легко определить, где начинается один раздел, а какой заканчивается, когда они закрыты программно.Обратите внимание, что если они уже были закрыты, это работает, как ожидалось.

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

Я подозреваю, что проблема возникает, потому что, когда аккордеон впервые схвачен, секции открыты.Но в этот момент я закрываю все разделы, и хотя раздел закрывается, он вызывает спорадическое перепрыгивание этих разделов, когда вы пытаетесь поместить раздел между двумя.

Я также заметил, что высотасодержание аккордеонных факторов в. В моем примере ниже первый div вызывает проблемы, когда он открыт, и вы пытаетесь отсортировать их, но другие меньше.

Вот код, который у меня есть.JQuery - это базовая библиотека jQuery, и материал, который я написал, для простоты я включил в строку: 

<html>
<head>
<link href="/css/flick/jquery-ui.css" media="screen" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jquery-ui.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    // Add Accordion stuff
    $(".accordion").accordion({
      autoHeight: false,
      active: false,
      collapsible: true
    }); // end $(".accordion").accordion

    // Add sortables
    $('.sortable').sortable({
      start: function(e, ui) {
        container = $(e.target);

        var parent_id = container.parent().parent().attr('id');
        expanded_ones = new Array();
        var count = 0;
        var summary = '';
        var child = '';
        var active = '';

        // now close all other sections
        $.each($('#' + parent_id + ' .accordion'), function() {
          // get the child element since that has the div id I need
          child = $(this).children('div');

          // get the active information to see if it is open or closed
          active = $(this).accordion('option', 'active');

          // check to see if this one is expanded
          if(parseInt(active) == active) {
            // store this id so we can open it later
            expanded_ones[count] = $(child).attr('id');
            count++;

            // and close the accordion
            $(this).accordion({ active: false });
          } // end if(parseInt(active) == active)
        }); // end $.each($('#' + parent_id + ' .accordion'), function()
      }, // end start: function(e, ui)
      stop: function(e, ui) {
        container = $(e.target);

        var parent_elem = '';

        // expand the ones that were originally expanded
        for(var i = 0; i < expanded_ones.length; i++) {
          parent_elem = $('#' + expanded_ones[i]).parent();
          $(parent_elem).accordion('option', 'active', 0);
        } // end for(var i = 0; i < expanded_ones; i++)
      } // end stop: function(e, ui)
    }); // end $('.sortable').sortable
  }); // end $(document).ready(function() {
</script>
</head>
<body>
<div id="outer">
  <div class="box">
    <div class="accordion_wrapper sortable" rel="sections">
      <div id="accordion_a" class="section_accordion">
        <div class="accordion">
          <h4>Accordion A</h4>
          <div id="accordion_a_content">
            <p>Stuff</p>
            <p>Stuff</p>
            <p>Stuff</p>
            <p>Stuff</p>
            <p>Stuff</p>
            <p>Stuff</p>
            <p>Stuff</p>
            <p>Stuff</p>
            <p>Stuff</p>
            <p>Stuff</p>
            <p>Stuff</p>
            <p>Stuff</p>
            <p>Stuff</p>
            <p>Stuff</p>
            <p>Stuff</p>
            <p>Stuff</p>
            <p>Stuff</p>
            <p>Stuff</p>
            <p>Stuff</p>
            <p>Stuff</p>
            <p>Stuff</p>
            <p>Stuff</p>
            <p>Stuff</p>
            <p>Stuff</p>
            <p>Stuff</p>
            <p>Stuff</p>
            <p>Stuff</p>
            <p>Stuff</p>
            <p>Stuff</p>
            <p>Stuff</p>
            <p>Stuff</p>
            <p>Stuff</p>
            <p>Stuff</p>
            <p>Stuff</p>
            <p>Stuff</p>
            <p>Stuff</p>
          </div>
        </div>
      </div>

      <div id="accordion_b" class="section_accordion">
        <div class="accordion">
          <h4>Accordion B</h4>
          <div id="accordion_b_content">
            Stuff
          </div>
        </div>
      </div>

      <div id="accordion_c" class="section_accordion">
        <div class="accordion">
          <h4>Accordion C</h4>
          <div id="accordion_c_content">
            Stuff
          </div>
        </div>
      </div>

      <div id="accordion_d" class="section_accordion">
        <div class="accordion">
          <h4>Accordion D</h4>
          <div id="accordion_d_content">
            Stuff
          </div>
        </div>
      </div>
    </div>
  </div>
    </div>
  </body>
</html>

Ответы [ 2 ]

2 голосов
/ 25 февраля 2011

Во-первых, я бы сказал, это действительно должно быть в аккордеонах или сортируемом? Во-вторых, я настроил ваш пример здесь . Используя этот пример, сортируемый может отправить страницу повсюду, особенно когда аккордеон А открыт. Это может быть очень запутанным для некоторых пользователей. Я бы порекомендовал найти другой вариант для выполнения вашей задачи.

С веб-сайта jQueries API на Accordian

ПРИМЕЧАНИЕ: если вы хотите несколько разделов открой сразу, не пользуйся гармошкой

Аккордеон не позволяет больше, чем одна панель контента, которая будет открыта на в то же время, и это занимает много усилия, чтобы сделать это. Если вы ищете для виджета, который позволяет более одного панель содержимого должна быть открыта, не используйте этот. Обычно это может быть написано с несколько строк jQuery, что-то как это: 

 $(document).ready(function(){
    $('.accordion .head').click(function(){
        $(this).next().toggle();
        return false;   
    }).next().hide(); 
  });

Или анимированные: 

 $(document).ready(function(){
    $('.accordion .head').click(function() {
        $(this).next().toggle('slow');
        return false;
     }).next().hide();
 });

Поэтому я бы порекомендовал создать свой собственный код, если вы хотите иметь несколько открытых аккордеонов, которые можно сортировать.

0 голосов
/ 06 декабря 2012

В этом посте показано, как открыть несколько секций одновременно на аккордеоне. Ищите плагин JQuery, похожий на Accordian, но позволяющий открывать сразу несколько секций

...