【发布时间】：2014-11-08 05:45:05
【问题描述】：
所以我有一个包含 5 张不同照片的页面。当您单击每张照片时，下面的 div 将显示随附的文本，然后一旦您再次单击照片，文本将隐藏。我只是 javascript 的初学者，但我想要实现的是根据用户点击的照片显示不同的文本。
现在，当您单击照片时，会显示文字。但是，当您单击另一张照片时，新文本将显示在正下方。我要问的是，您如何更改 jquery 代码，以便在您单击照片时显示文本，但是当您单击另一张照片时，旧文本将隐藏而新文本将显示。我正在使用 Bootstrap 的所有 jQuery 'Collapse' 功能。
提前致谢！
我在这里有一个靴子：http://www.bootply.com/sabby_fields/h7iP24nwST
另外，如果可能的话，我将如何显示文字随附的照片？比如哪张照片是活跃的？就像一个简单的文本颜色变化。
这是 HTML 代码：
<div class="col-md-3"></div>
<div class="col-md-9">
<div class="team-bio">
<div class="row">
<div class="col-xs-3 col-sm-3 col-md-3">
<div data-toggle="collapse" data-parent="#accordion" href="#collapseOne" class="collapsed" aria-expanded="false">
<img class="img-responsive img-team-bio" src="http://placehold.it/150" style="margin-bottom:10px;" contenteditable="false">
<h4 class="">Name 1</h4>
</div>
</div>
<div class="col-xs-3 col-sm-3 col-md-3">
<div data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" class="collapsed">
<img class="img-responsive img-team-bio" src="http://placehold.it/150" style="margin-bottom:10px;">
<h4 class="">Name 2</h4>
</div>
</div>
<div class="col-xs-3 col-sm-3 col-md-3">
<img class="img-responsive img-team-bio" src="http://placehold.it/150" style="margin-bottom:10px;">
<h4 class="">Name 3</h4>
</div>
<div class="col-xs-3 col-sm-3 col-md-3">
<img class="img-responsive img-team-bio" src="http://placehold.it/150" style="margin-bottom:10px;">
<h4 class="">Name 4</h4>
</div>
</div>
<div class="row">
<div class="col-xs-3 col-sm-3 col-md-3">
<img class="img-responsive img-team-bio" src="http://placehold.it/150" style="margin-bottom:10px;">
<h4 class="">Name 5</h4>
</div>
</div>
<div id="collapseOne" class="col-md-12 panel-collapse collapse" aria-expanded="false" style="height: 0px;">
<!-- div to hide-->
<p class="">This is for Person 1.</p>
</div>
<!--div to hide-->
<div id="collapseTwo" class="panel-collapse collapse col-md-12">
<!-- div to hide-->
<p class="">This is for Person 2.</p>
</div>
<!--div to hide-->
</div>
Bootstrap 的 jQuery Collapse 功能：
var Collapse = function (element, options) {
this.$element = $(element)
this.options = $.extend({}, Collapse.DEFAULTS, options)
this.$trigger = $(this.options.trigger).filter('[href="#' + element.id + '"], [data-target="#' + element.id + '"]')
this.transitioning = null
if (this.options.parent) {
this.$parent = this.getParent()
} else {
this.addAriaAndCollapsedClass(this.$element, this.$trigger)
}
if (this.options.toggle) this.toggle()
}
Collapse.VERSION = '3.3.0'
Collapse.TRANSITION_DURATION = 350
Collapse.DEFAULTS = {
toggle: true,
trigger: '[data-toggle="collapse"]'
}
Collapse.prototype.dimension = function () {
var hasWidth = this.$element.hasClass('width')
return hasWidth ? 'width' : 'height'
}
Collapse.prototype.show = function () {
if (this.transitioning || this.$element.hasClass('in')) return
var activesData
var actives = this.$parent && this.$parent.find('> .panel').children('.in, .collapsing')
if (actives && actives.length) {
activesData = actives.data('bs.collapse')
if (activesData && activesData.transitioning) return
}
var startEvent = $.Event('show.bs.collapse')
this.$element.trigger(startEvent)
if (startEvent.isDefaultPrevented()) return
if (actives && actives.length) {
Plugin.call(actives, 'hide')
activesData || actives.data('bs.collapse', null)
}
var dimension = this.dimension()
this.$element
.removeClass('collapse')
.addClass('collapsing')[dimension](0)
.attr('aria-expanded', true)
this.$trigger
.removeClass('collapsed')
.attr('aria-expanded', true)
this.transitioning = 1
var complete = function () {
this.$element
.removeClass('collapsing')
.addClass('collapse in')[dimension]('')
this.transitioning = 0
this.$element
.trigger('shown.bs.collapse')
}
if (!$.support.transition) return complete.call(this)
var scrollSize = $.camelCase(['scroll', dimension].join('-'))
this.$element
.one('bsTransitionEnd', $.proxy(complete, this))
.emulateTransitionEnd(Collapse.TRANSITION_DURATION)[dimension](this.$element[0][scrollSize])
}
Collapse.prototype.hide = function () {
if (this.transitioning || !this.$element.hasClass('in')) return
var startEvent = $.Event('hide.bs.collapse')
this.$element.trigger(startEvent)
if (startEvent.isDefaultPrevented()) return
var dimension = this.dimension()
this.$element[dimension](this.$element[dimension]())[0].offsetHeight
this.$element
.addClass('collapsing')
.removeClass('collapse in')
.attr('aria-expanded', false)
this.$trigger
.addClass('collapsed')
.attr('aria-expanded', false)
this.transitioning = 1
var complete = function () {
this.transitioning = 0
this.$element
.removeClass('collapsing')
.addClass('collapse')
.trigger('hidden.bs.collapse')
}
if (!$.support.transition) return complete.call(this)
this.$element
[dimension](0)
.one('bsTransitionEnd', $.proxy(complete, this))
.emulateTransitionEnd(Collapse.TRANSITION_DURATION)
}
Collapse.prototype.toggle = function () {
this[this.$element.hasClass('in') ? 'hide' : 'show']()
}
Collapse.prototype.getParent = function () {
return $(this.options.parent)
.find('[data-toggle="collapse"][data-parent="' + this.options.parent + '"]')
.each($.proxy(function (i, element) {
var $element = $(element)
this.addAriaAndCollapsedClass(getTargetFromTrigger($element), $element)
}, this))
.end()
}
Collapse.prototype.addAriaAndCollapsedClass = function ($element, $trigger) {
var isOpen = $element.hasClass('in')
$element.attr('aria-expanded', isOpen)
$trigger
.toggleClass('collapsed', !isOpen)
.attr('aria-expanded', isOpen)
}
function getTargetFromTrigger($trigger) {
var href
var target = $trigger.attr('data-target')
|| (href = $trigger.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') // strip for ie7
return $(target)
}
【问题讨论】：
-
请将代码也添加到您的问题中。来自帮助中心：如果可以创建一个可以链接到的问题的实时示例（例如，在 sqlfiddle.com 或 jsbin.com 上），那么就这样做 - 但也要在您的问题本身中包含代码。不是每个人都可以访问外部网站，而且链接可能会随着时间的推移而中断。
标签： twitter-bootstrap-3 show-hide