引导程序手风琴显示鼠标悬停上的数据
bootstrap accordion show data on mouseover
所以这是一个标准的引导手风琴。
当鼠标悬停在标题上时,我正试图将其切换到下一节。
我可以执行第一个命令来隐藏,但第二个显示会改变一切。我只想让它显示与它下面的标题相关的内容。
谢谢!
<script type="text/javascript">
$("#accordionuser .panel-heading").mouseover(
function() { $('#accordionuser .panel-collapse').collapse('hide');
$('#accordionuser .panel-collapse').collapse('show');
}
);
</script>
<div class="panel-group" id="accordionuser">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordionuser" href="#collapse1">
Collapsible Group 1</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordionuser" href="#collapse2">
Collapsible Group 2</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordionuser" href="#collapse3">
Collapsible Group 3</a>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</div>
</div>
</div>
</div>
</div>
</div>
</div>
我真的不理解你,但我希望这能解决你的问题:
$('#accordionuser .panel-collapse').collapse('hide');
$(this).parents('.panel').find('.panel-collapse').collapse('show');
演示:https://jsfiddle.net/yavxazv6/
相关文章:
- DT数据表背景颜色为黑色,但仍有悬停和选择颜色
- 鼠标悬停的属性数据是什么
- 美国地图插件,具有状态数据/悬停功能的新按钮
- 鼠标悬停时数据保持自动刷新
- 引导程序手风琴显示鼠标悬停上的数据
- d3在鼠标悬停上过滤数据之后从选择中提取值
- 悬停缩放在数据表的第二页上不起作用
- 图表JS未显示悬停时的小数据
- 当鼠标悬停在一行上时,哪个plot.ly json属性可以显示所有悬停数据
- Highcharts 单个水平堆叠条形图,始终显示数据名称(标签)和 %-年龄,并在鼠标悬停时显示数据编号和系列名称
- 半圆形圆环饼图,饼图上有标签(数据名称)和年龄百分比..和鼠标悬停上的数据编号
- 将鼠标悬停在表行上时,如何显示包含该行字段数据的弹出窗口
- 在悬停在 SVG 路径上时显示来自 JSON 的数据
- 如何为整个系列而不是单个数据启用悬停效果
- 使表数据显示在悬停状态(javascript/jQuery或css)
- D3js如何获得悬停时显示的特定于数据的工具提示
- 如何使用高地图在悬停时显示多个数据
- 如何使用bootstrap'突出显示数据列表中的一行;s表的悬停类
- 流线图-显示元数据悬停
- 如何改变z数据悬停显示百分比以及百分比的颜色