Fix box inside box collapsing error (#1681) (#1685)

* Previously, with a .box inside a .box, any clicking on a
  collapse/expand button in either .box would cause both of them to
  collapse/expand.  This commit makes sure parent and child boxes
  do not interfere with each other.
pull/1708/head
bmanifold 2017-10-26 16:30:08 -04:00 committed by Abdullah Almsaeed
parent b98b5914e7
commit a667b95b8d
1 changed files with 11 additions and 6 deletions

View File

@ -23,6 +23,7 @@
var Selector = { var Selector = {
data : '.box', data : '.box',
collapsed: '.collapsed-box', collapsed: '.collapsed-box',
header : '.box-header',
body : '.box-body', body : '.box-body',
footer : '.box-footer', footer : '.box-footer',
tools : '.box-tools' tools : '.box-tools'
@ -65,12 +66,13 @@
$(this.element).removeClass(ClassName.collapsed) $(this.element).removeClass(ClassName.collapsed)
$(this.element) $(this.element)
.find(Selector.tools) .children(Selector.header + ', ' + Selector.body + ', ' + Selector.footer)
.children(Selector.tools)
.find('.' + expandIcon) .find('.' + expandIcon)
.removeClass(expandIcon) .removeClass(expandIcon)
.addClass(collapseIcon) .addClass(collapseIcon)
$(this.element).find(Selector.body + ', ' + Selector.footer) $(this.element).children(Selector.body + ', ' + Selector.footer)
.slideDown(this.options.animationSpeed, function () { .slideDown(this.options.animationSpeed, function () {
$(this.element).trigger(expandedEvent) $(this.element).trigger(expandedEvent)
}.bind(this)) }.bind(this))
@ -82,12 +84,13 @@
var expandIcon = this.options.expandIcon var expandIcon = this.options.expandIcon
$(this.element) $(this.element)
.find(Selector.tools) .children(Selector.header + ', ' + Selector.body + ', ' + Selector.footer)
.children(Selector.tools)
.find('.' + collapseIcon) .find('.' + collapseIcon)
.removeClass(collapseIcon) .removeClass(collapseIcon)
.addClass(expandIcon) .addClass(expandIcon)
$(this.element).find(Selector.body + ', ' + Selector.footer) $(this.element).children(Selector.body + ', ' + Selector.footer)
.slideUp(this.options.animationSpeed, function () { .slideUp(this.options.animationSpeed, function () {
$(this.element).addClass(ClassName.collapsed) $(this.element).addClass(ClassName.collapsed)
$(this.element).trigger(collapsedEvent) $(this.element).trigger(collapsedEvent)
@ -110,12 +113,14 @@
$(this.element).on('click', this.options.collapseTrigger, function (event) { $(this.element).on('click', this.options.collapseTrigger, function (event) {
if (event) event.preventDefault() if (event) event.preventDefault()
that.toggle() that.toggle($(this))
return false
}) })
$(this.element).on('click', this.options.removeTrigger, function (event) { $(this.element).on('click', this.options.removeTrigger, function (event) {
if (event) event.preventDefault() if (event) event.preventDefault()
that.remove() that.remove($(this))
return false
}) })
} }