如何使用jQuery更改可折叠内容的title属性

我认为这就是您所需要的：

$('.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();
        }); 

http://jsfiddle.net/rzseLj27/3/

您的代码当前不起作用，因为您正在将标题更改应用于包含的#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');
});

这会在面板标题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>