質問編集履歴
1
記入途中で投稿してしまいました・・・
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,11 +1,9 @@
|
|
|
1
1
|
###前提・実現したいこと
|
|
2
|
-
Bootstrapのcollapseを修正して
|
|
2
|
+
Bootstrapのcollapseを修正して展開中（collapsing）の高さを変えたいのですが
|
|
3
3
|
どこを修正したらいいのか分からず悩んでいます。
|
|
4
4
|
|
|
5
5
|
###該当のソースコード
|
|
6
6
|
```ここに言語を入力
|
|
7
|
-
+function ($) {
|
|
8
|
-
'use strict';
|
|
9
7
|
|
|
10
8
|
var Collapse = function (element, options) {
|
|
11
9
|
this.$element = $(element)
|
|
@@ -70,96 +68,24 @@
|
|
|
70
68
|
this.transitioning = 1
|
|
71
69
|
|
|
72
70
|
var complete = function () {
|
|
73
|
-
this.$element
|
|
71
|
+
this.$element //ブレークポイント１
|
|
74
72
|
.removeClass('collapsing')
|
|
75
73
|
.addClass('collapse in')[dimension]('')
|
|
76
|
-
this.transitioning = 0
|
|
74
|
+
this.transitioning = 0//ブレークポイント２
|
|
77
75
|
this.$element
|
|
78
76
|
.trigger('shown.bs.collapse')
|
|
79
77
|
}
|
|
80
|
-
|
|
81
|
-
if (!$.support.transition) return complete.call(this)
|
|
82
|
-
|
|
83
|
-
var scrollSize = $.camelCase(['scroll', dimension].join('-'))
|
|
84
|
-
|
|
85
|
-
this.$element
|
|
86
|
-
.one('bsTransitionEnd', $.proxy(complete, this))
|
|
87
|
-
.emulateTransitionEnd(Collapse.TRANSITION_DURATION)[dimension](this.$element[0][scrollSize])
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
Collapse.prototype.hide = function () {
|
|
91
|
-
if (this.transitioning || !this.$element.hasClass('in')) return
|
|
92
|
-
|
|
93
|
-
var startEvent = $.Event('hide.bs.collapse')
|
|
94
|
-
this.$element.trigger(startEvent)
|
|
95
|
-
if (startEvent.isDefaultPrevented()) return
|
|
96
|
-
|
|
97
|
-
var dimension = this.dimension()
|
|
98
|
-
|
|
99
|
-
this.$element[dimension](this.$element[dimension]())[0].offsetHeight
|
|
100
|
-
|
|
101
|
-
this.$element
|
|
102
|
-
.addClass('collapsing')
|
|
103
|
-
.removeClass('collapse in')
|
|
104
|
-
.attr('aria-expanded', false)
|
|
105
|
-
|
|
106
|
-
this.$trigger
|
|
107
|
-
.addClass('collapsed')
|
|
108
|
-
.attr('aria-expanded', false)
|
|
109
|
-
|
|
110
|
-
this.transitioning = 1
|
|
111
|
-
|
|
112
|
-
var complete = function () {
|
|
113
|
-
this.transitioning = 0
|
|
114
|
-
this.$element
|
|
115
|
-
.removeClass('collapsing')
|
|
116
|
-
.addClass('collapse')
|
|
117
|
-
.trigger('hidden.bs.collapse')
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
if (!$.support.transition) return complete.call(this)
|
|
121
|
-
|
|
122
|
-
this.$element
|
|
123
|
-
[dimension](0)
|
|
124
|
-
.one('bsTransitionEnd', $.proxy(complete, this))
|
|
125
|
-
.emulateTransitionEnd(Collapse.TRANSITION_DURATION)
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
Collapse.prototype.toggle = function () {
|
|
129
|
-
this[this.$element.hasClass('in') ? 'hide' : 'show']()
|
|
130
|
-
}
|
|
131
|
-
|
|
132
|
-
Collapse.prototype.getParent = function () {
|
|
133
|
-
return $(this.options.parent)
|
|
134
|
-
.find('[data-toggle="collapse"][data-parent="' + this.options.parent + '"]')
|
|
135
|
-
.each($.proxy(function (i, element) {
|
|
136
|
-
var $element = $(element)
|
|
137
|
-
this.addAriaAndCollapsedClass(getTargetFromTrigger($element), $element)
|
|
138
|
-
}, this))
|
|
139
|
-
.end()
|
|
140
|
-
}
|
|
141
|
-
|
|
142
|
-
Collapse.prototype.addAriaAndCollapsedClass = function ($element, $trigger) {
|
|
143
|
-
var isOpen = $element.hasClass('in')
|
|
144
|
-
|
|
145
|
-
$element.attr('aria-expanded', isOpen)
|
|
146
|
-
$trigger
|
|
147
|
-
.toggleClass('collapsed', !isOpen)
|
|
148
|
-
.attr('aria-expanded', isOpen)
|
|
149
|
-
}
|
|
150
|
-
|
|
151
|
-
function getTargetFromTrigger($trigger) {
|
|
152
|
-
var href
|
|
153
|
-
var target = $trigger.attr('data-target')
|
|
154
|
-
|| (href = $trigger.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') // strip for ie7
|
|
155
|
-
|
|
156
|
-
return $(target)
|
|
157
|
-
}
|
|
158
|
-
|
|
159
78
|
```
|
|
160
79
|
|
|
161
|
-
###
|
|
80
|
+
###状況
|
|
81
|
+
ブレークポイント１では展開の高さが高くなりすぎ無駄な余白ができます。
|
|
82
|
+
ブレークポイント２で展開の高さはコンテンツと同じに、丁度よい高さとなります。
|
|
162
|
-
|
|
83
|
+
挙動としては一瞬余白ができた後に丁度良い高さとなります。
|
|
84
|
+
この一瞬余白ができるのをなくしたくいろいろためしているのですが意図する挙動となりません。
|
|
163
85
|
|
|
164
86
|
###補足情報(言語/FW/ツール等のバージョンなど)
|
|
87
|
+
wordpress４．７．２
|
|
88
|
+
bootstrap３．３．７
|
|
165
|
-
|
|
89
|
+
jquery1.12.4
|
|
90
|
+
wp_bootstrap_navwalker.php使用
|
|
91
|
+
※WordPressでBootstrap 3のドロップダウンメニューを簡単に導入出来るPHPファイル
|