如何使用 jQuery 正确排序多个手风琴 [英] How to properly sort multiple accordions with jQuery

查看：20
本文介绍了如何使用 jQuery 正确排序多个手风琴的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

这是我第一次发帖，如果我没有提供足够的细节，请告诉我.

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

我还希望用户能够对这些手风琴进行分类.根据当前设置的页面方式，用户可以毫无问题地对手风琴进行排序.

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

当您尝试将要排序的部分放在之前打开的两个部分之间时会出现问题.jQuery 似乎无法轻松分辨出一个部分从哪里开始，当它们以编程方式关闭时结束.请注意，如果它们已经关闭，它会按预期工作.

我已经尝试了几种方法来解决这个问题，包括在部分之间添加一个间隔 div 以及破坏手风琴，然后在排序完成后重新初始化它们都无济于事.

我怀疑问题的发生是因为当第一次抓住手风琴时，这些部分是打开的.但在那一点上，我关闭了所有部分，即使该部分关闭，当您尝试将一个部分放在两个部分之间时，它也会导致这些部分偶尔跳动.

我还注意到手风琴内容的高度会影响其中的因素.在我下面的示例中，第一个 div 在打开时会导致问题，并且您尝试对它们进行排序，但其他 div 则不那么重要.

这是我的代码.jQuery 是基本的 jQuery 库，为了简单起见，我编写的内容包含在内联:

<头><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() {//添加手风琴的东西$(".accordion").accordion({自动高度:假，活动:假，可折叠:真实});//结束 $(".accordion").accordion//添加排序$('.sortable').sortable({开始:函数(e，ui){容器 = $(e.target);var parent_id = container.parent().parent().attr('id');expand_ones = 新数组()；无功计数 = 0;var 总结 = '';var 孩子 = '';无功活动 = '';//现在关闭所有其他部分$.each($('#' + parent_id + '.accordion'), function() {//获取子元素，因为它具有我需要的 div idchild = $(this).children('div');//获取活动信息，查看是打开还是关闭active = $(this).accordion('option', 'active');//检查这个是否被展开if(parseInt(active) == active) {//存储这个 id 以便我们稍后打开它expand_ones[count] = $(child).attr('id');计数++；//并关闭手风琴$(this).accordion({ active: false });}//结束 if(parseInt(active) == active)});//结束 $.each($('#' + parent_id + ' .accordion'), function()},//结束开始:function(e, ui)停止:函数(e，ui){容器 = $(e.target);var parent_elem = '';//展开原先展开的for(var i = 0; i <身体><div id="外层"><div class="box"><div class="accordion_wrapper sortable" rel="sections"><div id="accordion_a" class="section_accordion"><div class="accordion"><h4>手风琴A</h4><div id="accordion_a_content"><p>东西</p><p>东西</p><p>东西</p><p>东西</p><p>东西</p><p>东西</p><p>东西</p><p>东西</p><p>东西</p><p>东西</p><p>东西</p><p>东西</p><p>东西</p><p>东西</p><p>东西</p><p>东西</p><p>东西</p><p>东西</p><p>东西</p><p>东西</p><p>东西</p><p>东西</p><p>东西</p><p>东西</p><p>东西</p><p>东西</p><p>东西</p><p>东西</p><p>东西</p><p>东西</p><p>东西</p><p>东西</p><p>东西</p><p>东西</p><p>东西</p><p>东西</p>

<div id="accordion_b" class="section_accordion"><div class="accordion"><h4>手风琴B</h4><div id="accordion_b_content">东西

<div id="accordion_c" class="section_accordion"><div class="accordion"><h4>手风琴C</h4><div id="accordion_c_content">东西

<div id="accordion_d" class="section_accordion"><div class="accordion"><h4>手风琴D</h4><div id="accordion_d_content">东西

解决方案

首先我想说，这真的需要手风琴或可排序吗?其次，我在此处设置了您的示例.使用这个例子，sortable 可以将页面发送到整个地方，尤其是当手风琴 A 打开时.这可能会让某些用户非常困惑.我建议您寻找其他选项来完成您的任务.

来自 jQueries 网站 Accordian 上的 API

<块引用>

注意:如果您想要多个部分立即打开，不要使用手风琴

手风琴不允许超过将在以下位置打开一个内容面板同时，需要很多时间努力做到这一点.如果你正在寻找对于允许多个的小部件内容面板要打开，不要使用这个.通常它可以写成几行 jQuery 代替，一些东西像这样:

 $(document).ready(function(){$('.accordion .head').click(function(){$(this).next().toggle();返回假；}).next().hide();});

<块引用>

或动画:

 $(document).ready(function(){$('.accordion .head').click(function() {$(this).next().toggle('slow');返回假；}).next().hide();});

因此，如果您想打开多个可排序的手风琴，我建议您创建自己的自定义代码.

This is my first time posting so please let me know if I fail to provide enough details.

I have a page that contains multiple accordions. I wanted to use multiple accordions because I wanted users to be able to have multiple sections open at once which is not native to accordion.

I also want users to be able to sort those accordions. The way the page is currently set up, users can sort the accordion with no problems.

When the user goes to sort the accordions, I have a script that will close all existing accordions, store their ids in an array, and then reopen them when the user is done sorting. That part works fine too.

The problem occurs when you try to place the section you are sorting between two sections that were previously open. It does not appear that jQuery can easily tell where one section begins and one ends when they are closed programatically. Note that if they were already closed, it works as expected.

I've tried several approaches to this problem including adding a spacer div between sections as well as destroying the accordions and then reinitializing them after the sorting is finished to no avail.

I suspect the problem occurs because when the accordion is first grabbed, the sections are open. But at that point, I close all the sections and even though the section closes, it causes those sections to jump around sporadically when you try to put a section between two.

I've also noticed that the height of the contents of the accordion factors in. In my example below, the first div causes problems when it is open and you try to sort them but the others less so.

Here is the code I have. The jQuery is the basic jQuery library and the stuff I wrote I included inline for simplicity:

<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>

解决方案

Firstly i would say, does this really need to be in accordians or sortable? Secondly i set up your example here. Using this example the sortable can send the page all over the place especially when accordian A is open. This can be extremely confusing to some users. I would recommend finding another option to complete your task.

From jQueries website API on Accordian

NOTE: If you want multiple sections open at once, don't use an accordion

An accordion doesn't allow more than one content panel to be open at the same time, and it takes a lot of effort to do that. If you are looking for a widget that allows more than one content panel to be open, don't use this. Usually it can be written with a few lines of jQuery instead, something like this:

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

Or animated:

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

So i would recommend creating your own custom code if you want to have multiple accordians open that are sortable.

这篇关于如何使用 jQuery 正确排序多个手风琴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆