logo标签列表

如何使用jQuery正确地对多个手风琴进行排序

jqueryjquery-uiaccordionjquery-ui-sortable
6

这是我第一次发布，如果我没有提供足够的详细信息，请告诉我。

我有一个包含多个手风琴的页面。我想使用多个手风琴，因为我希望用户能够同时打开多个部分，这在手风琴中不是原生支持的。

我还希望用户能够对这些手风琴进行排序。目前设置的方式是，用户可以轻松地对手风琴进行排序。

当用户尝试对手风琴进行排序时，我会有一个脚本来关闭所有现有的手风琴，将它们的 ID 存储在数组中，然后在用户完成排序后重新打开它们。这一部分也很好用。

问题出现在当你尝试将正在排序的部分放置在先前打开的两个部分之间时。当它们被程序关闭时，jQuery 似乎无法轻松地确定一个部分何时开始和结束。请注意，如果它们已经关闭，那么就会按预期工作。

我尝试了几种方法来解决这个问题，包括在部分之间添加空白 div，以及在排序完成后销毁手风琴，然后重新初始化它们，但都没有成功。

我怀疑问题出现在当手风琴第一次被抓取时，部分是打开的。但那时，我关闭了所有的部分，即使部分关闭了，当你尝试将一个部分放置在两个部分之间时，它也会不规则地跳动。

我还注意到手风琴内容的高度是有影响的。在下面的示例中，第一个 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
首先，我想说的是，这个内容是否真的需要使用手风琴或可排序？其次，我在这里设置了你的示例。使用这个示例，当手风琴A打开时，可排序会将页面移动到各处，这可能会极大地困扰一些用户。我建议找到另一个选项来完成您的任务。
来自jQuery网站手风琴API

注意：如果要同时打开多个部分，请不要使用手风琴

手风琴不允许同时打开多个内容面板，并且这需要很多努力才能做到。如果您正在寻找一个允许同时打开多个内容面板的小部件，请不要使用它。通常可以使用几行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();
 });

如果你想要有多个可排序的手风琴同时展开，我建议你创建自己的定制代码。

谢谢您的建议。我最终实现了类似的东西，它运行得很好。 - lokisapocalypse
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接