我有这些可折叠面板，我希望title属性在打开或关闭时说明。我试图让它与我现在使用的脚本一起使用，但没有任何运气。
THX
<div class="container">
<h1>Information</h1>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading" data-target="#content1">
<h2 class="panel-title" title="hidden content closed">
Milky Way Black Hole Belches
</h2>
</div>
<div id="content1" class="collapse">
<div class="panel-body">
The monster back hole at the center of the Milky Way belched out an exceptionally high number of powerful X-ray flares in August 2014, did the beast chow down on a passing gas cloud, or is this typical for black holes? </span>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" data-target="#content2">
<h2 class="panel-title" title="hidden content Closed" >
Tiny Pluto Moon Kerberos Unveiled
</h2>
</div>
<div id="content2" class="collapse">
<div class="panel-body">
Newly received photos captured by NASA's New Horizons spacecraft reveal that Pluto's tiny moon Kerberos is smaller and brighter than researchers had expected.
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$('.panel-heading').click(function(){
var target = $(this).data("target");
$('#accordion').on('show.bs.collapse', function () {
$('#accordion .in').collapse('hide')
$(this).attr('title', 'hidden content closed');
});
$(target).collapse('toggle')
$(this).attr('title', 'hidden content open');
});
});
</script
答案 0 :(得分：1)
我认为这就是你所需要的：
$('.panel-heading').click(function(){
var target = $(this).attr("data-target");
$(this).find("h2").toggleClass("inactive active");
$(this).find("h2").attr("title",$(this).find("h2").hasClass('inactive') ? 'hidden content closed' : 'hidden content opened');
$(target).toggle();
});
答案 1 :(得分：0)
这会在面板标题div而不是h2上设置标题，但会按照您的要求设置：http://jsfiddle.net/x057wp3L/2/
<div class="container">
<h1>Information</h1>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading" data-target="#content1" title="hidden content closed">
<h2 class="panel-title">
Milky Way Black Hole Belches
</h2>
</div>
<div id="content1" class="collapse">
<div class="panel-body">
The monster back hole at the center of the Milky Way belched out an exceptionally high number of powerful X-ray flares in August 2014, did the beast chow down on a passing gas cloud, or is this typical for black holes? </span>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" data-target="#content2" title="hidden content closed">
<h2 class="panel-title">
Tiny Pluto Moon Kerberos Unveiled
</h2>
</div>
<div id="content2" class="collapse">
<div class="panel-body">
Newly received photos captured by NASA's New Horizons spacecraft reveal that Pluto's tiny moon Kerberos is smaller and brighter than researchers had expected.
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$('.panel-heading').click(function(){
var target = $(this).data("target");
$('#accordion').on('show.bs.collapse', function () {
$('#accordion .in').collapse('hide');
// Set the title of all panels to be "closed"
$('#accordion .panel-heading').each(function () { $(this).attr('title', 'hidden content closed'); });
});
$(target).collapse('toggle');
// Set the title of the clicked panel to be "open"
$(this).attr('title', 'hidden content open');
});
});
</script>
答案 2 :(得分：0)
您的代码目前无效，因为您正在将标题更改应用于包含#accordion元素，而不是实际标题。此外，您每次都会为该手风琴应用新的听众。
使用Bootstrap实现此目的的最佳方法是使用data-*属性，然后监听更改以更改标题。下面的代码完全符合您的要求;
的Javascript
$(document).ready(function() {
$(".collapse").on('hide.bs.collapse', function(){
var title = $(this).parents('div.panel').find('.panel-title')[0];
$(title).attr('title','hidden content closed');
});
$(".collapse").on('show.bs.collapse', function(){
var title = $(this).parents('div.panel').find('.panel-title')[0];
$(title).attr('title','hidden content open');
});
});
HTML
<div class="container">
<h1>Information</h1>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading" data-target="#content1" data-parent="#accordion" data-toggle="collapse">
<h2 class="panel-title" title="hidden content closed">
Milky Way Black Hole Belches
</h2>
</div>
<div id="content1" class="collapse">
<div class="panel-body">
The monster back hole at the center of the Milky Way belched out an exceptionally high number of powerful X-ray flares in August 2014, did the beast chow down on a passing gas cloud, or is this typical for black holes? </span>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" data-target="#content2" data-parent="#accordion" data-toggle="collapse">
<h2 class="panel-title" title="hidden content Closed" >
Tiny Pluto Moon Kerberos Unveiled
</h2>
</div>
<div id="content2" class="collapse">
<div class="panel-body">
Newly received photos captured by NASA's New Horizons spacecraft reveal that Pluto's tiny moon Kerberos is smaller and brighter than researchers had expected.
</div>
</div>
</div>
</div>
</div>
如果您还想在元素标题中包含标题的文本，则只需在侦听器中抓取该文本并将其附加到其上即可。
$(".collapse").on('hide.bs.collapse', function(){
var title = $(this).parents('div.panel').find('.panel-title')[0];
var titleText = $(title).text();
$(title).attr('title',titleText+' hidden content closed');
});
$(".collapse").on('show.bs.collapse', function(){
var title = $(this).parents('div.panel').find('.panel-title')[0];
var titleText = $(title).text();
$(title).attr('title',titleText+' hidden content open');
});