在同一頁面上展示這個手風琴的多個實例

Question

我一直在試圖在同一個頁面上展示這個手風琴的多個實例。這裏是一個鏈接到小提琴jsfiddle.net/r817L7rv/

第二個手風琴是相同的第一個與不同的標題文本或內容重複。以下是代碼。查看依賴關係的小提琴外部資源。

(function($) { 

// cache some values 
var cache = { 
     idx_expanded : -1, // the index of the current expanded slice 
     sliceH   : 0, // the default slice's height 
     current   : 0, // controls the current slider position 
     totalSlices  : 0 // total number of slices 
    }, 
    aux  = { 
     // triggered when we click a slice. If the slice is expanded, 
     // we close it, otherwise we open it.. 
     selectSlice  : function($el, $slices, $navNext, $navPrev, settings) { 

      return $.Deferred(
       function(dfd) { 

        var expanded = $el.data('expanded'), 
         pos   = $el.data('position'), 

         itemHeight, othersHeight, 

         $others  = $slices.not($el); 

        // if it's opened.. 
        if(expanded) { 
         $el.data('expanded', false); 
         cache.idx_expanded = -1; 

         // the default values of each slices's height 
         itemHeight = cache.sliceH; 
         othersHeight= cache.sliceH; 

         // hide the content div 
         $el.find('.va-content','.za-content').hide(); 

         // control the navigation buttons visibility 
         if(aux.canSlideUp($slices, settings)) 
          $navPrev.fadeIn(); 
         else 
          $navPrev.fadeOut(); 

         if(aux.canSlideDown($slices, settings)) 
          $navNext.fadeIn(); 
         else 
          $navNext.fadeOut(); 
        } 
        // if it's closed.. 
        else { 
         $el.data('expanded', true); 
         cache.idx_expanded = $el.index(); 
         $others.data('expanded', false); 
         // the current slice's height 
         itemHeight = settings.expandedHeight; 
         // the height the other slices will have 
         othersHeight= Math.ceil((settings.accordionH - settings.expandedHeight)/(settings.visibleSlices - 1)); 

         // control the navigation buttons visibility 
         if(cache.idx_expanded > 0) 
          $navPrev.fadeIn(); 
         else  
          $navPrev.fadeOut(); 

         if(cache.idx_expanded < cache.totalSlices - 1) 
          $navNext.fadeIn(); 
         else 
          $navNext.fadeOut(); 
        } 

        // the animation parameters for the clicked slice 
        var animParam = { 
             height : itemHeight + 'px', 
             opacity : 1, 
             top  : (pos - 1) * othersHeight + 'px' 
             }; 

        // animate the clicked slice and also its title (<h3>) 
        $el.stop() 
         .animate(animParam, settings.animSpeed, settings.animEasing, function() { 
          if(!expanded) 
           $el.find('.va-content','za-content').fadeIn(settings.contentAnimSpeed); 
         }) 
         .find('.va-title','za-title') 
         .stop() 
         .animate({ 
          lineHeight : cache.sliceH + 'px' 
         }, settings.animSpeed, settings.animEasing);  

        // animate all the others 
        $others.each(function(i){ 
         var $other = $(this), 
          posother= $other.data('position'), 
          t; 

         if(expanded) 
          t = (posother - 1) * othersHeight ; 
         else { 
          if(posother < pos) 
           t = (posother - 1) * othersHeight ; 
          else 
           t = ((posother - 2) * othersHeight) + settings.expandedHeight; 
         } 

         $other.stop() 
           .animate({ 
            top  : t + 'px', 
            height : othersHeight + 'px', 
            opacity : (expanded) ? 1 : settings.animOpacity 
           }, settings.animSpeed, settings.animEasing, dfd.resolve) 
           .find('.va-title','za-title') 
           .stop() 
           .animate({ 
            lineHeight : othersHeight + 'px' 
           }, settings.animSpeed, settings.animEasing) 
           .end() 
           .find('.va-content','za-content') 
           .hide(); 
        }); 
       } 
      ).promise(); 

     }, 
     // triggered when clicking the navigation buttons/mouse scrolling 
     navigate  : function(dir, $slices, $navNext, $navPrev, settings) { 
      // if animating return 
      if($slices.is(':animated')) 
       return false; 

      // all move up/down one position 
      // if settings.savePositions is false, then we need to close any expanded slice before sliding 
      // otherwise we slide, and the next one will open automatically 
      var $el; 

      if(cache.idx_expanded != -1 && !settings.savePositions) { 
       $el = $slices.eq(cache.idx_expanded); 

       $.when(aux.selectSlice($el, $slices, $navNext, $navPrev, settings)).done(function(){ 
        setTimeout(function() { 
        aux.slide(dir, $slices, $navNext, $navPrev, settings); 
        }, 10); 
       }); 
      } 
      else { 
       aux.slide(dir, $slices, $navNext, $navPrev, settings); 
      } 
     }, 
     slide   : function(dir, $slices, $navNext, $navPrev, settings) { 
      // control if we can navigate. 
      // control the navigation buttons visibility. 
      // the navigation will behave differently for the cases we have all the slices closed, 
      // and when one is opened. It will also depend on settings.savePositions 
      if(cache.idx_expanded === -1 || !settings.savePositions) { 
      if(dir === 1 && cache.current + settings.visibleSlices >= cache.totalSlices) 
       return false; 
      else if(dir === -1 && cache.current === 0) 
       return false; 

      if(dir === -1 && cache.current === 1) 
       $navPrev.fadeOut(); 
      else 
       $navPrev.fadeIn(); 

       if(dir === 1 && cache.current + settings.visibleSlices === cache.totalSlices - 1) 
       $navNext.fadeOut(); 
      else 
       $navNext.fadeIn(); 
      } 
      else { 
       if(dir === 1 && cache.idx_expanded === cache.totalSlices - 1) 
        return false; 
       else if(dir === -1 && cache.idx_expanded === 0) 
        return false; 

       if(dir === -1 && cache.idx_expanded === 1) 
        $navPrev.fadeOut(); 
       else 
        $navPrev.fadeIn(); 

       if(dir === 1 && cache.idx_expanded === cache.totalSlices - 2) 
        $navNext.fadeOut(); 
       else 
        $navNext.fadeIn(); 
      } 

      var $currentSlice = $slices.eq(cache.idx_expanded), 
       $nextSlice, 
       t; 

      (dir === 1) ? $nextSlice = $currentSlice.next() : $nextSlice = $currentSlice.prev(); 

      // if we cannot slide up/down, then we just call the selectSlice for the previous/next slice 
      if((dir === 1 && !aux.canSlideDown($slices, settings)) || 
       (dir === -1 && !aux.canSlideUp($slices, settings))) { 
       aux.selectSlice($nextSlice, $slices, $navNext, $navPrev, settings); 
       return false; 
      } 

      // if we slide down, the top and position of each slice will decrease 
      if(dir === 1) { 
       cache.current++; 
       t = '-=' + cache.sliceH; 
       pos_increment = -1; 
      } 
      else { 
       cache.current--; 
       t = '+=' + cache.sliceH; 
       pos_increment = 1; 
      } 

      $slices.each(function(i) { 
       var $slice  = $(this), 
        pos   = $slice.data('position'); 

       // all closed or savePositions is false 
       if(!settings.savePositions || cache.idx_expanded === -1) 
        $slice.stop().animate({top : t}, settings.animSpeed, settings.animEasing); 
       else { 
        var itemHeight, othersHeight; 

        // if the slice is the one we should open.. 
        if(i === $nextSlice.index()) { 
         $slice.data('expanded', true); 
         cache.idx_expanded = $slice.index(); 
         itemHeight   = settings.expandedHeight; 
         othersHeight  = (settings.accordionH - settings.expandedHeight)/(settings.visibleSlices - 1); 

         $slice.stop() 
           .animate({ 
            height  : itemHeight + 'px', 
            opacity  : 1, 
            top   : (dir === 1) ? (pos - 2) * othersHeight + 'px' : pos * othersHeight + 'px' 
           }, settings.animSpeed, settings.animEasing, function() { 
            $slice.find('.va-content','za-content').fadeIn(settings.contentAnimSpeed); 
           }) 
           .find('.va-title','za-title') 
           .stop() 
           .animate({ 
            lineHeight : cache.sliceH + 'px' 
           }, settings.animSpeed, settings.animEasing); 
        } 
        // if the slice is the one opened, lets close it 
        else if($slice.data('expanded')){ 
         // collapse 

         $slice.data('expanded', false); 
         othersHeight  = (settings.accordionH - settings.expandedHeight)/(settings.visibleSlices - 1); 

         $slice.stop() 
           .animate({ 
            height : othersHeight + 'px', 
            opacity : settings.animOpacity, 
            top  : (dir === 1) ? '-=' + othersHeight : '+=' + settings.expandedHeight 
           }, settings.animSpeed, settings.animEasing) 
           .find('.va-title','za-title') 
           .stop() 
           .animate({ 
            lineHeight : othersHeight + 'px' 
           }, settings.animSpeed, settings.animEasing) 
           .end() 
           .find('.va-content','za-content') 
           .hide();   
        } 
        // all the others.. 
        else { 
         $slice.data('expanded', false); 
         othersHeight  = (settings.accordionH - settings.expandedHeight)/(settings.visibleSlices - 1); 

         $slice.stop() 
           .animate({ 
            top  : (dir === 1) ? '-=' + othersHeight : '+=' + othersHeight 
           }, settings.animSpeed, settings.animEasing); 
        } 
       } 
       // change the slice's position 
       $slice.data().position += pos_increment; 
      }); 
     }, 
     canSlideUp  : function($slices, settings) { 
      var $first   = $slices.eq(cache.current); 

      if($first.index() !== 0) 
       return true; 
     }, 
     canSlideDown : function($slices, settings) { 
      var $last   = $slices.eq(cache.current + settings.visibleSlices - 1); 

      if($last.index() !== cache.totalSlices - 1) 
       return true; 
     } 
    }, 
    methods = { 
     init  : function(options) { 

      if(this.length) { 

       var settings = { 
        // the accordion's width 
        accordionW  : 705, 
        // the accordion's height 
        accordionH  : 610, 
        // number of visible slices 
        visibleSlices : 3, 
        // the height of a opened slice 
        // should not be more than accordionH 
        expandedHeight : 450, 
        // speed when opening/closing a slice 
        animSpeed  : 250, 
        // easing when opening/closing a slice 
        animEasing  : 'jswing', 
        // opacity value for the collapsed slices 
        animOpacity  : 0.2, 
        // time to fade in the slice's content 
        contentAnimSpeed: 900, 
        // if this is set to false, then before 
        // sliding we collapse any opened slice 
        savePositions : true 
       }; 

       return this.each(function() { 

        // if options exist, lets merge them with our default settings 
        if (options) { 
         $.extend(settings, options); 
        } 

        var $el    = $(this), 
         // the accordion's slices 
         $slices   = $el.find('div.va-slice','div.za-slice'), 
         // the navigation buttons 
         $navNext  = $el.find('span.va-nav-next','span.za-nav-next'), 
         $navPrev  = $el.find('span.va-nav-prev','span.za-nav-prev'); 

        // each slice's height 
        cache.sliceH  = Math.ceil(settings.accordionH/settings.visibleSlices); 

        // total slices 
        cache.totalSlices = $slices.length; 

        // control some user config parameters 
        if(settings.expandedHeight > settings.accordionH) 
         settings.expandedHeight = settings.accordionH; 
        else if(settings.expandedHeight <= cache.sliceH) 
         settings.expandedHeight = cache.sliceH + 50; // give it a minimum 

        // set the accordion's width & height 
        $el.css({ 
         width : settings.accordionW + 'px', 
         height : settings.accordionH + 'px' 
        }); 

        // show/hide $navNext 
        if(settings.visibleSlices < cache.totalSlices ) 
         $navNext.show(); 

        // set the top & height for each slice. 
        // also save the position of each one. 
        // as we navigate, the first one in the accordion 
        // will have position 1 and the last settings.visibleSlices. 
        // finally set line-height of the title (<h3>) 
        $slices.each(function(i){ 
         var $slice = $(this); 
         $slice.css({ 
          top  : i * cache.sliceH + 'px', 
          height : cache.sliceH + 'px' 
         }).data('position', (i + 1)); 
        }) 
        .children('.va-title','za-title') 
        .css('line-height', cache.sliceH + 'px'); 

        // click event 
        $slices.bind('click.vaccordion', function(e) { 
         // only if we have more than 1 visible slice. 
         // otherwise we will just be able to slide. 
         if(settings.visibleSlices > 1) { 
          var $el   = $(this); 
          aux.selectSlice($el, $slices, $navNext, $navPrev, settings); 
         } 
        }); 

        // navigation events 
        $navNext.bind('click.vaccordion', function(e){ 
         aux.navigate(1, $slices, $navNext, $navPrev, settings); 
        }); 

        $navPrev.bind('click.vaccordion', function(e){ 
         aux.navigate(-1, $slices, $navNext, $navPrev, settings); 
        }); 

        // adds events to the mouse 
        $el.bind('mousewheel.vaccordion', function(e, delta) { 
         if(delta > 0) { 
          aux.navigate(-1, $slices, $navNext, $navPrev, settings); 
         } 
         else { 
          aux.navigate(1, $slices, $navNext, $navPrev, settings); 
         } 
         return false; 
        }); 

       }); 
      } 
     } 
    }; 

$.fn.vaccordion = function(method) { 
    if (methods[method]) { 
     return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); 
    } else if (typeof method === 'object' || ! method) { 
     return methods.init.apply(this, arguments); 
    } else { 
     $.error('Method ' + method + ' does not exist on jQuery.vaccordion'); 
    } 
}; 

})(jQuery); 

Answer 1

ID必須是唯一的，請嘗試更改Seconde系列元素的id：

<div id="va-accordion" class="va-container"> 
... 
</div> 
<div id="va-accordion2" class="va-container"> //Add number 2 on the id 
... 
</div> 

而且對jQuery函數使用

(function ($) { 
    $('#va-accordion, #va-accordion2').vaccordion();//Add the other id 
}(jQuery)); 

檢查您Demo Fiddle

現在，如果你想改善你的代碼，你也可以參考classname，而不是ID的

(function ($) { 
    $('.va-container').vaccordion(); 
}(jQuery)); 

檢查另一個Demo Fiddle