在下面的 HTML 页面中，Heading 1 and Heading 2当页面第一次加载时正确折叠（因为我正在使用class="panel-collapse collapse". Then Collapse/Expand当用户单击时工作正常Heading。但是，当用户单击某个链接内的链接时Heading在一个标题下，该标题会折叠。我希望当里面有链接时它保持打开状态Heading被点击。折叠/展开行为仅应在用户单击标题时发生，而不是在单击标题内的链接时发生。我更喜欢不使用 JavaSctipt 的解决方案。注意：我在带有 Bootstrap 3.0 的 ASP.NET Core 项目中使用它 - 但这应该不重要。
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" href="#ToolsID">Heading 1</a>
</h4>
</div>
<div class="panel-collapse collapse" id="ToolsID">
<div class="list-group">
<a asp-controller="TestCtrl" asp-action="TestAction" class="list-group-item">Click Here</a>
<a href="#" class="list-group-item">Click Here</a>
</div>
</div>
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" href="#ReportsID">Heading 2</a>
</h4>
</div>
<div class="panel-collapse collapse" id="ReportsID">
<div class="list-group">
<a href="#" class="list-group-item">Click Here </a>
<a href="#" class="list-group-item">Click Here</a>
</div>
</div>
</div>
</div>
UPDATE
The Source View html in the browser看起来如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ASP.NET Core Test App</title>
<link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="/css/site.css" />
</head>
<body>
<div class="container navbar navbar-inverse navbar-fixed-top text-center">
<img src="/images/nps.gif"><img src="/images/nps_txt.gif">
</div>
<div class="container nav nav-pills" style="margin-top:4px;background-color:cornsilk;">
The same content as in the <div class="panel-group">....</div> shown in the post example above
<script src="/lib/jquery/dist/jquery.js"></script>
<script src="/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="/js/site.js?v=EWaMeWsJBYWmL2g_KkgXZQ5nPe-a3Ichp0LEgzXczKo"></script>
<script>
$('.list-group-item').click(function(e){
e.stopPropagation();
})
</script>
</body>
</html>
您的 HTML 似乎是正确的。如果您使用的 Bootstrap 版本已绑定事件侦听器，即使您在某个窗口中单击，它也会触发事件侦听器anchor，恐怕您需要添加自己的 JavaScript。
$('.list-group-item').click(function(e){
e.stopPropagation();
})
应该根据您的需要工作。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
