0
我有这种手风琴，我希望整行都是可点击的，但是当我点击它时，焦点被设置回应用程序的顶部。我正在使用该标签，以便在移动设备上使用键盘时，它将获得焦点。有没有办法让焦点停留在行而不是顶端？如何关注Boostrap手风琴
<div id="accordion" class="panel-group">
<div class="panel panel-default">
<div class="panel-heading" data-target="#content1">
<h2 class="panel-title" title="hidden content closed">
<a href="#content1">
<span aria-hidden="true">Milky Way Black Hole Belches</span>
<span class="glyphicon glyphicon-chevron-down pull-right"></span>
</a>
</h2>
</div>
<div id="content1" class="panel-collapse 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" >
<a href="#content2">
<span aria-hidden="true">Tiny Pluto Moon Kerberos Unveiled</span>
<span class="glyphicon glyphicon-chevron-down pull-right"></span>
</a>
</h2>
</div>
<div id="content2" class="panel-collapse 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 class="panel panel-default">
<div class="panel-heading" data-target="#content3">
<h2 class="panel-title" title="hidden content Closed">
<a href="#content3">
<span aria-hidden="true">New Horizons Pluto Probe Heads Toward 2nd Flyby Target</span>
<span class="glyphicon glyphicon-chevron-down pull-right"></span>
</a>
</h2>
</div>
<div id="content3" class="panel-collapse collapse">
<div class="panel-body">
New Horizons, which in July performed the first-ever flyby of Pluto, fired up its engines yesterday (Oct. 22) in the first of four maneuvers designed to send the probe zooming past a small object called 2014 MU69 on Jan. 1, 2019. </span>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" data-target="#content4">
<h2 class="panel-title" title="hidden content Closed">
<a href="#content4">
<span aria-hidden="true">Ingredients for Life Were Always Present on Earth, Comet Suggests </span>
<span class="glyphicon glyphicon-chevron-down pull-right"></span>
</a>
</h2>
</div>
<div id="content4" class="panel-collapse collapse">
<div class="panel-body">
Astronomers detected 21 different complex organic molecules streaming from Comet Lovejoy during its highly anticipated close approach to the sun this past January. Many of these same compounds have also been spotted around newly forming stars
</div>
</div>
</div>
</div>
的JavaScript
<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');
});
});
$('.collapse').on('shown.bs.collapse', function(){
$(this).parent().find(".glyphicon-chevron-down").removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
}).on('hidden.bs.collapse', function(){
$(this).parent().find(".glyphicon-chevron-up").removeClass("glyphicon-chevron-up").addClass("glyphicon-chevron-down");
});
$(".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');
});
</script>
<!-- Add text to open\close menu button -->
<script>
$('.navbar-collapse').on('shown.bs.collapse', function() {
$(this).parent().find(".navbar-toggle").attr('title', 'dropdown menu open');
}).on('hidden.bs.collapse', function() {
$(this).parent().find(".navbar-toggle").attr('title', 'dropdown menu closed');
});
</script>