upd accordion: switch to live binding for heading clicks

kakakacool · Jul 11, 2014 · be62906 · be62906
1 parent b643b33
commit be62906
Show file tree

Hide file tree

Showing 11 changed files with 43 additions and 29 deletions.
diff --git a/docs/fonts/OpenSans-Bold.woff b/docs/fonts/OpenSans-Bold.woff
diff --git a/docs/fonts/OpenSans-Light.woff b/docs/fonts/OpenSans-Light.woff
diff --git a/docs/fonts/OpenSans.woff b/docs/fonts/OpenSans.woff
diff --git a/docs/fonts/PTSerif-Caption.woff b/docs/fonts/PTSerif-Caption.woff
diff --git a/docs/js/metro.min.js b/docs/js/metro.min.js
diff --git a/fonts/OpenSans-Bold.woff b/fonts/OpenSans-Bold.woff
diff --git a/fonts/OpenSans-Light.woff b/fonts/OpenSans-Light.woff
diff --git a/fonts/OpenSans.woff b/fonts/OpenSans.woff
diff --git a/fonts/PTSerif-Caption.woff b/fonts/PTSerif-Caption.woff
diff --git a/js/metro-accordion.js b/js/metro-accordion.js
@@ -16,48 +16,62 @@
 
             if (element.data('closeany') != undefined) this.options.closeAny = element.data('closeany');
 
-            this._frames = element.children(".accordion-frame");
-
             this.init();
         },
 
         init: function(){
             var that = this;
 
-            this._frames.each(function(){
+            that.element.on('click', '.accordion-frame > .heading', function(e){
+                e.preventDefault();
+                e.stopPropagation();
+
+                if ($(this).attr('disabled') || $(this).data('action') == 'none') return;
+
+                if (that.options.closeAny) that._closeFrames();
+
+                var frame = $(this).parent(), content = frame.children('.content');
+                console.log(this);
+
+                if ($(content).is(":hidden")) {
+                    $(content).slideDown();
+                    $(this).removeClass("collapsed");
+                    that._trigger("frame", e, {frame: frame});
+                    that.options.open(frame);
+                } else {
+                    $(content).slideUp();
+                    $(this).addClass("collapsed");
+                }
+                that.options.action(frame);
+            });
+
+            var frames = this.element.children('.accordion-frame');
+
+
+            frames.each(function(){
                 var frame = this,
                     a = $(this).children(".heading"),
                     content = $(this).children(".content");
 
-                if ($(a).hasClass("active") && !$(a).attr('disabled') && $(a).data('action') != 'none') {
+                if ($(frame).hasClass("active") && !$(frame).attr('disabled') && $(frame).data('action') != 'none') {
                     $(content).show();
                     $(a).removeClass("collapsed");
                 } else {
                     $(a).addClass("collapsed");
                 }
-
-                a.on('click', function(e){
-                    e.preventDefault();
-                    if ($(this).attr('disabled') || $(this).data('action') == 'none') return;
-
-                    if (that.options.closeAny) that._closeFrames();
-
-                    if ($(content).is(":hidden")) {
-                        $(content).slideDown();
-                        $(this).removeClass("collapsed");
-                        that._trigger("frame", e, {frame: frame});
-                        that.options.open(frame);
-                    } else {
-                        $(content).slideUp();
-                        $(this).addClass("collapsed");
-                    }
-                    that.options.action(frame);
-                });
             });
+
+
         },
 
         _closeFrames: function(){
-            this._frames.children(".content").slideUp().parent().children('.heading').addClass("collapsed");
+            var frames = this.element.children('.accordion-frame');
+            $.each(frames, function(){
+                var frame = $(this);
+                frame.children('.heading').addClass('collapsed');
+                frame.children('.content').slideUp();
+            });
+            //this._frames.children(".content").slideUp().parent().children('.heading').addClass("collapsed");
         },
 
         _destroy: function(){},

diff --git a/min/metro.min.js b/min/metro.min.js