Question

我正在为JQuery使用http://mjsarfatti.com/sandbox/nestedSortable/嵌套排序。我想让每个可嵌套的手风琴。我已经达到了嵌套可排序和手风琴的程度;但是，每当我将任何可排序项拖到左侧时，整个应用程序都会冻结。

这是我的JS（运行良好）：

$('ol.sortable').nestedSortable({
    disableNesting: 'no-nest',
    forcePlaceholderSize: true,
    handle: 'div',
    helper: 'clone',
    items: 'li',
    maxLevels: 10,
    opacity: .6,
    placeholder: 'placeholder',
    revert: 250,
    tabSize: 25,
    tolerance: 'pointer',
    toleranceElement: '> div'                   
});

$(function() {
    var stop = false;
    $( "#accordion h3" ).click(function( event ) {
         if ( stop ) {
            event.stopImmediatePropagation();
            event.preventDefault();
            stop = false;
            }
    });
    $( "#accordion" )
            .accordion({
            header: "> ol > li > div > h3"
    })
            .nestedSortable({
            axis: "y",
            handle: "h3",
            stop: function() {
            stop = true;
                    }
            });
    });

这是html：

<section id="accordion"> 
    <ol class="sortable"> 
        <li id="list_1">
            <div>
                <h3><a href="#">Header</a></h3>
                <div>
                    <p>des fields.</p>
                </div>
        </div>
        <li id="list_2"><div>Item 2</div> 
        <ol> 
            <li id="list_3"><div>Sub Item 2.1</div> 
            <li id="list_4"><div>Sub Item 2.2</div> 
            <li id="list_5"><div>Sub Item 2.3</div> 
            <li id="list_6"><div>Sub Item 2.4</div> 
        </ol>   
    </ol>
</section>

这绝对是一个问题，只有在使用手风琴和sortables时才会出现。有人遇到过这个问题吗？

Answer 1

您可能想尝试

$('ol.sortable').nestedSortable({ options }).accordion({accordion options});

Answer 2

您可以在自己的方法中使用Jquery UI sortable（）和accordion（）方法，将元素作为参数传递，并在您想要的级别上使用您的函数。

Answer 3

你可以尝试这个插件

(function(){

        $.accordion_each = function(obj,options){

            function nextChar(my_string){
            if(typeof(my_string)!='undefined'){
                return my_string.substring(0,my_string.length-1)+String.fromCharCode(my_string.charCodeAt(my_string.length-1)+1)
            }
            };


            var defaults = {'clicking':false,'show':false};


            var options = $.extend({}, defaults, options);

            obj=$(obj);

            var init = obj

        init.children().addClass('a');

            var c='a';

            for(var i = 0;i<25;i++){

                if( obj.find('.'+c).children().next()){

                        obj.find('.'+c).children().next().addClass(c=nextChar(c)).hide();
                }

            };



            var wrapping = obj.find('a.toggler');


            wrapping.wrap('<div class="panel"/>')


            obj.find('div').click(function(e){

                if( $(this).attr('class')!='a') {
                    e.stopPropagation();

                    if($(this).next().attr('class') == nextChar($(this).parent().attr('class')) ){

                        obj.find('.toggler-dowm').removeClass('toggler-dowm');

                        var cur = $(this).next();

                        if(cur.css('display')=='none'){
                           $('.'+$(this).next().attr('class'),obj).slideUp('fast');
                            cur.slideDown('fast');
                            $(this).find('a').addClass('toggler-dowm');

                        }else{
                            cur.slideUp('fast');
                            $(this).find('a').removeClass('toggler-dowm');
                        };


                    };
                };

            });

        };

        $.fn.accordion = function(Options) {
            this.each(function() {
                $.accordion_each(this, Options);
            });
            return this;
        };
    })(jQuery);

Answer 4

像这样的东西

<li id="list_1">
    <div class='test'>
        <div class='header'> Header</div>
        <div> Content of header 1</div>
        <div>
            <p>des fields.</p>
        </div>
    </div>

function loadTemplatesAccordion() {
    $(".test").accordion({
        icons: false,
        autoHeight: false,
        active: false,
        header: '.head',
        collapsible: true
    });
}

JQuery嵌套可排序手风琴

4 个答案: