Question

所以我试图创建一种方法，让多个小部件（可能有10-20 +）使用相同的精确效果。我现在遇到的问题是它正在踩踏div定位。有没有办法重置每个位置以容纳在容器内？我删除了“溢出：隐藏”，以便您可以看到盒子的位置。任何帮助都会很棒。我相信这是我的js / html / css之间的结合。不确定如何解决这个问题。谢谢！

http://jsfiddle.net/57wzt/

$(document).ready(function() {

    //Effects
    defaultWidth    = 250; //pixels
    transition      = 375; //millisecond

    //Generate ID for each box

    //Reset Margin, Set Margin (for each div content)
    function resetMargin(width) {

        divLeftMargin   = 0;

        $('.widget-block').each(function() {

            thisLeftMargin  = divLeftMargin + 'px';
            $(this).css('margin-left', thisLeftMargin);
            divLeftMargin   = divLeftMargin + width;

        });
    }

    //Reset DIV Margins
    resetMargin(defaultWidth);

    //Find sub-menu for each menu and show the arrow
    $('.menu a').each(function() {

        thisHref    = $(this).attr('href');

        if($(thisHref).length > 0) {
            $(this).addClass('has-child');
        }

    });

    //User Menuclick
    $('.menu a').click(function(event) {

        //Disable default action
        event.preventDefault();

        //Initialize all variable and object
        selectedDiv         = $(this).attr('href');
        selectedMargin      = $(selectedDiv).css('margin-left');
        selectedParent      = $(this).parents('.widget-block');
        sliderMargin        = $('.slider').css('margin-left');
        slidingMargin       = (parseInt(sliderMargin) - defaultWidth) + 'px';


        //If selected menu has sub menu
        if(selectedMargin.length > 0) {

            //Add 'Back' button to DIV
            $(selectedDiv).children('.header').prepend('<span class="back"></span>').bind('click', function () {

                //And bind action to this button
                selectedParent  = $(this).parents('.widget-block');
                sliderMargin    = - (parseInt(selectedParent.css('margin-left')) - defaultWidth) + 'px';
                $(this).parents('.slider').animate({marginLeft: sliderMargin}, transition);
            });

            //If selected div content's margin more than or equal than default width
            if((parseInt(selectedMargin) - defaultWidth) >= defaultWidth) {

                //Move the selected div content after the menu's div content, reset and set all div content margin and slide them
                selectedParent.after($(selectedDiv));
                resetMargin(defaultWidth);
                $(this).parents('.slider').animate({marginLeft: slidingMargin}, transition);

            } else {

                $(this).parents('.slider').animate({marginLeft: slidingMargin}, transition);

            }
        }
    });
});

试图在同一页面上的多个实例中使用jQuery滑块

0 个答案: